@red-hat-developer-hub/backstage-plugin-quickstart 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @red-hat-developer-hub/backstage-plugin-quickstart
+
+## 1.0.0
+
+### Major Changes
+
+- 4f8249b: First version of quickstart plugin

package/README.md

@@ -0,0 +1,123 @@
+# Quickstart Plugin
+
+The Quickstart plugin provides a guided onboarding experience for new users of Red Hat Developer Hub. It displays a customizable drawer interface with interactive quickstart steps that help users get familiar with the platform.
+
+## Features
+
+- **Interactive Drawer Interface**: Displays quickstart steps in a slide-out drawer
+- **Progress Tracking**: Tracks completion status of individual steps with persistent storage
+- **Configurable Content**: Define custom quickstart items through app configuration
+- **Visual Progress Indicator**: Shows overall completion progress with a progress bar
+- **Call-to-Action Support**: Each step can include clickable action buttons
+
+## Installation
+
+1. Install the plugin package:
+
+```bash
+# From the root of your app
+yarn add --cwd packages/app @red-hat-developer-hub/backstage-plugin-quickstart
+```
+
+2. Add the plugin to your Backstage app by modifying `packages/app/src/App.tsx`:
+
+```tsx
+import { QuickstartDrawerProvider } from '@red-hat-developer-hub/backstage-plugin-quickstart';
+
+// Wrap your app with the QuickstartDrawerProvider
+const App = () => (
+  <AppProvider>
+    <QuickstartDrawerProvider>
+      {/* Your existing app components */}
+    </QuickstartDrawerProvider>
+  </AppProvider>
+);
+```
+
+## Configuration
+
+Configure quickstart items in your `app-config.yaml`:
+
+```yaml
+app:
+  quickstart:
+    - title: 'Welcome to Developer Hub'
+      description: 'Learn the basics of navigating the Developer Hub interface'
+      icon: 'home'
+      cta:
+        text: 'Get Started'
+        link: '/catalog'
+    - title: 'Create Your First Component'
+      description: 'Follow our guide to register your first software component'
+      icon: 'code'
+      cta:
+        text: 'Create Component'
+        link: '/catalog-import'
+    - title: 'Explore Templates'
+      description: 'Discover available software templates to bootstrap new projects'
+      icon: 'template'
+      cta:
+        text: 'Browse Templates'
+        link: '/create'
+```
+
+### Configuration Schema
+
+Each quickstart item supports the following properties:
+
+- `title` (required): The display title for the quickstart step
+- `description` (required): A brief description of what the step covers
+- `icon` (optional): Icon identifier (supports Material UI icons)
+- `cta` (optional): Call-to-action object with:
+  - `text`: Button text
+  - `link`: Target URL or route
+
+## Usage
+
+### Using the Context Hook
+
+Access quickstart drawer functionality in your components:
+
+```tsx
+import { useQuickstartDrawerContext } from '@red-hat-developer-hub/backstage-plugin-quickstart';
+
+const MyComponent = () => {
+  const { openDrawer, closeDrawer, isDrawerOpen } =
+    useQuickstartDrawerContext();
+
+  return <button onClick={openDrawer}>Open Quickstart Guide</button>;
+};
+```
+
+### Progress Persistence
+
+The plugin automatically saves progress to local storage, so users can continue where they left off even after refreshing the page or returning later.
+
+## Development
+
+### Local Development
+
+To run the plugin in isolation for development:
+
+```bash
+cd plugins/quickstart
+yarn start
+```
+
+This will start the plugin with hot reloading for faster development iteration.
+
+### Testing
+
+Run the test suite:
+
+```bash
+yarn test
+```
+
+### Building
+
+Build the plugin for production:
+
+```bash
+yarn build
+```

package/app-config.dynamic.yaml

@@ -0,0 +1,6 @@
+dynamicPlugins:
+  frontend:
+    red-hat-developer-hub.backstage-plugin-quickstart:
+      mountPoints:
+        - mountPoint: application/provider
+          importName: QuickstartDrawerProvider

package/config.d.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Config {
+  app?: {
+    /**
+     * Configuration required for adding quickstarts
+     * @visibility frontend
+     */
+    quickstart?: Array</**
+     * @visibility frontend
+     */
+    {
+      /**
+       * The title of quickstart.
+       * @visibility frontend
+       */
+      title: string;
+      /**
+       * Optional icon for quickstart.
+       * @visibility frontend
+       */
+      icon?: string;
+      /**
+       * The description of quickstart.
+       * @visibility frontend
+       */
+      description: string;
+      /**
+       * Optional action item for quickstart.
+       * @visibility frontend
+       */
+      cta?: {
+        /**
+         * Action item text.
+         * @visibility frontend
+         */
+        text: string;
+        /**
+         * Action item link.
+         * @visibility frontend
+         */
+        link: string;
+      };
+    }>;
+  };
+}

package/dist/components/Quickstart.esm.js

@@ -0,0 +1,64 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import { QuickstartHeader } from './QuickstartHeader.esm.js';
+import Divider from '@mui/material/Divider';
+import { QuickstartContent } from './QuickstartContent/QuickstartContent.esm.js';
+import { QuickstartFooter } from './QuickstartFooter.esm.js';
+import { useState, useCallback, useEffect } from 'react';
+
+const Quickstart = ({
+  quickstartItems,
+  handleDrawerClose
+}) => {
+  const itemCount = quickstartItems.length;
+  const [progress, setProgress] = useState(0);
+  const calculateProgress = useCallback(() => {
+    const completedCount = quickstartItems.filter((item, index) => {
+      const itemKey = `${item.title}-${index}`;
+      const stepState = localStorage.getItem(itemKey);
+      return stepState === "true";
+    }).length;
+    const percentage = completedCount / itemCount * 100;
+    return Math.round(percentage * 100) / 100;
+  }, [quickstartItems, itemCount]);
+  useEffect(() => {
+    const calculatedProgress = calculateProgress();
+    setProgress(calculatedProgress);
+    localStorage.setItem("progressState", calculatedProgress.toString());
+  }, [quickstartItems, itemCount, calculateProgress]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          padding: (theme) => `${theme.spacing(10.5)} ${theme.spacing(3)} ${theme.spacing(3)}`
+        },
+        children: [
+          /* @__PURE__ */ jsx(QuickstartHeader, {}),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(
+            QuickstartContent,
+            {
+              quickstartItems,
+              itemCount,
+              setProgress: () => {
+                const newProgress = calculateProgress();
+                setProgress(newProgress);
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      QuickstartFooter,
+      {
+        handleDrawerClose,
+        progress
+      }
+    )
+  ] });
+};
+
+export { Quickstart };
+//# sourceMappingURL=Quickstart.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Quickstart.esm.js","sources":["../../src/components/Quickstart.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport { QuickstartHeader } from './QuickstartHeader';\nimport Divider from '@mui/material/Divider';\nimport { QuickstartContent } from './QuickstartContent/QuickstartContent';\nimport { QuickstartFooter } from './QuickstartFooter';\nimport { useEffect, useState, useCallback } from 'react';\nimport { QuickstartItemData } from '../types';\n\ntype QuickstartProps = {\n  quickstartItems: QuickstartItemData[];\n  handleDrawerClose: () => void;\n};\n\nexport const Quickstart = ({\n  quickstartItems,\n  handleDrawerClose,\n}: QuickstartProps) => {\n  const itemCount = quickstartItems.length;\n  const [progress, setProgress] = useState<number>(0);\n\n  const calculateProgress = useCallback(() => {\n    const completedCount = quickstartItems.filter((item, index) => {\n      const itemKey = `${item.title}-${index}`;\n      const stepState = localStorage.getItem(itemKey);\n      return stepState === 'true';\n    }).length;\n\n    const percentage = (completedCount / itemCount) * 100;\n    return Math.round(percentage * 100) / 100;\n  }, [quickstartItems, itemCount]);\n\n  useEffect(() => {\n    const calculatedProgress = calculateProgress();\n    setProgress(calculatedProgress);\n    localStorage.setItem('progressState', calculatedProgress.toString());\n  }, [quickstartItems, itemCount, calculateProgress]);\n\n  return (\n    <>\n      <Box\n        sx={{\n          padding: theme =>\n            `${theme.spacing(10.5)} ${theme.spacing(3)} ${theme.spacing(3)}`,\n        }}\n      >\n        <QuickstartHeader />\n        <Divider />\n        <QuickstartContent\n          quickstartItems={quickstartItems}\n          itemCount={itemCount}\n          setProgress={() => {\n            const newProgress = calculateProgress();\n            setProgress(newProgress);\n          }}\n        />\n      </Box>\n      <QuickstartFooter\n        handleDrawerClose={handleDrawerClose}\n        progress={progress}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,aAAa,CAAC;AAAA,EACzB,eAAA;AAAA,EACA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,YAAY,eAAgB,CAAA,MAAA;AAClC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAiB,CAAC,CAAA;AAElD,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAA,MAAM,cAAiB,GAAA,eAAA,CAAgB,MAAO,CAAA,CAAC,MAAM,KAAU,KAAA;AAC7D,MAAA,MAAM,OAAU,GAAA,CAAA,EAAG,IAAK,CAAA,KAAK,IAAI,KAAK,CAAA,CAAA;AACtC,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,OAAA,CAAQ,OAAO,CAAA;AAC9C,MAAA,OAAO,SAAc,KAAA,MAAA;AAAA,KACtB,CAAE,CAAA,MAAA;AAEH,IAAM,MAAA,UAAA,GAAc,iBAAiB,SAAa,GAAA,GAAA;AAClD,IAAA,OAAO,IAAK,CAAA,KAAA,CAAM,UAAa,GAAA,GAAG,CAAI,GAAA,GAAA;AAAA,GACrC,EAAA,CAAC,eAAiB,EAAA,SAAS,CAAC,CAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,qBAAqB,iBAAkB,EAAA;AAC7C,IAAA,WAAA,CAAY,kBAAkB,CAAA;AAC9B,IAAA,YAAA,CAAa,OAAQ,CAAA,eAAA,EAAiB,kBAAmB,CAAA,QAAA,EAAU,CAAA;AAAA,GAClE,EAAA,CAAC,eAAiB,EAAA,SAAA,EAAW,iBAAiB,CAAC,CAAA;AAElD,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,SAAS,CACP,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAC,CAAA,CAAA,EAAI,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,EAAI,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,SAClE;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,CAAA;AAAA,8BACjB,OAAQ,EAAA,EAAA,CAAA;AAAA,0BACT,GAAA;AAAA,YAAC,iBAAA;AAAA,YAAA;AAAA,cACC,eAAA;AAAA,cACA,SAAA;AAAA,cACA,aAAa,MAAM;AACjB,gBAAA,MAAM,cAAc,iBAAkB,EAAA;AACtC,gBAAA,WAAA,CAAY,WAAW,CAAA;AAAA;AACzB;AAAA;AACF;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QACA;AAAA;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/QuickstartContent/QuickstartContent.esm.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import { QuickstartItem } from './QuickstartItem.esm.js';
+import { EmptyState } from '@backstage/core-components';
+import { useState } from 'react';
+
+const QuickstartContent = ({
+  quickstartItems,
+  setProgress,
+  itemCount
+}) => {
+  const [openItems, setOpenItems] = useState(
+    new Array(itemCount).fill(false)
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        paddingTop: (theme) => `${theme.spacing(3)}`
+      },
+      children: quickstartItems.length > 0 ? /* @__PURE__ */ jsx(List, { disablePadding: true, children: quickstartItems.map((item, index) => /* @__PURE__ */ jsx(
+        QuickstartItem,
+        {
+          item,
+          index,
+          open: openItems[index],
+          handleOpen: () => setOpenItems((oi) => {
+            return oi.map(
+              (val, valIndex) => valIndex === index ? !val : false
+            );
+          }),
+          setProgress: () => setProgress(index)
+        },
+        `${item.title}-${index}`
+      )) }) : /* @__PURE__ */ jsx(EmptyState, { title: "Quickstart content not available.", missing: "data" })
+    }
+  );
+};
+
+export { QuickstartContent };
+//# sourceMappingURL=QuickstartContent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartContent.esm.js","sources":["../../../src/components/QuickstartContent/QuickstartContent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport List from '@mui/material/List';\nimport { QuickstartItem } from './QuickstartItem';\nimport { EmptyState } from '@backstage/core-components';\nimport { useState } from 'react';\nimport { QuickstartItemData } from '../../types';\n\ntype QuickstartContentProps = {\n  quickstartItems: QuickstartItemData[];\n  setProgress: (index: number) => void;\n  itemCount: number;\n};\n\nexport const QuickstartContent = ({\n  quickstartItems,\n  setProgress,\n  itemCount,\n}: QuickstartContentProps) => {\n  const [openItems, setOpenItems] = useState<boolean[]>(\n    new Array(itemCount).fill(false),\n  );\n\n  return (\n    <Box\n      sx={{\n        paddingTop: theme => `${theme.spacing(3)}`,\n      }}\n    >\n      {quickstartItems.length > 0 ? (\n        <List disablePadding>\n          {quickstartItems.map((item: QuickstartItemData, index: number) => (\n            <QuickstartItem\n              key={`${item.title}-${index}`}\n              item={item}\n              index={index}\n              open={openItems[index]}\n              handleOpen={() =>\n                setOpenItems(oi => {\n                  return oi.map((val, valIndex) =>\n                    valIndex === index ? !val : false,\n                  );\n                })\n              }\n              setProgress={() => setProgress(index)}\n            />\n          ))}\n        </List>\n      ) : (\n        <EmptyState title=\"Quickstart content not available.\" missing=\"data\" />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,oBAAoB,CAAC;AAAA,EAChC,eAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA;AAAA,IAChC,IAAI,KAAA,CAAM,SAAS,CAAA,CAAE,KAAK,KAAK;AAAA,GACjC;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,YAAY,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,OAC1C;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,MAAS,GAAA,CAAA,mBACvB,GAAA,CAAA,IAAA,EAAA,EAAK,cAAc,EAAA,IAAA,EACjB,QAAgB,EAAA,eAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAA0B,KAC9C,qBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UAEC,IAAA;AAAA,UACA,KAAA;AAAA,UACA,IAAA,EAAM,UAAU,KAAK,CAAA;AAAA,UACrB,UAAA,EAAY,MACV,YAAA,CAAa,CAAM,EAAA,KAAA;AACjB,YAAA,OAAO,EAAG,CAAA,GAAA;AAAA,cAAI,CAAC,GAAK,EAAA,QAAA,KAClB,QAAa,KAAA,KAAA,GAAQ,CAAC,GAAM,GAAA;AAAA,aAC9B;AAAA,WACD,CAAA;AAAA,UAEH,WAAA,EAAa,MAAM,WAAA,CAAY,KAAK;AAAA,SAAA;AAAA,QAX/B,CAAG,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,OAa9B,GACH,CAEA,mBAAA,GAAA,CAAC,cAAW,KAAM,EAAA,mCAAA,EAAoC,SAAQ,MAAO,EAAA;AAAA;AAAA,GAEzE;AAEJ;;;;"}

package/dist/components/QuickstartContent/QuickstartCtaLink.esm.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { LinkButton } from '@backstage/core-components';
+
+const QuickstartCtaLink = ({ cta, onClick }) => {
+  if (!cta) {
+    return /* @__PURE__ */ jsx(
+      LinkButton,
+      {
+        color: "primary",
+        variant: "outlined",
+        to: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          onClick();
+        },
+        children: "Got it!"
+      }
+    );
+  }
+  const isExternalLink = cta.link.startsWith("http://") || cta.link.startsWith("https://");
+  return isExternalLink ? /* @__PURE__ */ jsxs(
+    LinkButton,
+    {
+      color: "primary",
+      style: {
+        gap: "5px"
+      },
+      variant: "outlined",
+      to: cta.link,
+      onClick,
+      children: [
+        cta.text,
+        "\xA0",
+        /* @__PURE__ */ jsx(
+          OpenInNewIcon,
+          {
+            sx: {
+              fontSize: "15px"
+            }
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    LinkButton,
+    {
+      color: "primary",
+      variant: "outlined",
+      to: cta.link,
+      onClick,
+      children: cta.text
+    }
+  );
+};
+
+export { QuickstartCtaLink };
+//# sourceMappingURL=QuickstartCtaLink.esm.js.map

package/dist/components/QuickstartContent/QuickstartCtaLink.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartCtaLink.esm.js","sources":["../../../src/components/QuickstartContent/QuickstartCtaLink.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew';\nimport { QuickstartItemCtaData } from '../../types';\nimport { LinkButton } from '@backstage/core-components';\n\nexport type QuickstartCtaLinkProps = {\n  cta?: QuickstartItemCtaData;\n  onClick: () => void;\n};\n\nexport const QuickstartCtaLink = ({ cta, onClick }: QuickstartCtaLinkProps) => {\n  // If no CTA is provided, show a default \"Got it!\" button\n  if (!cta) {\n    return (\n      <LinkButton\n        color=\"primary\"\n        variant=\"outlined\"\n        to=\"#\"\n        onClick={e => {\n          e.preventDefault();\n          onClick();\n        }}\n      >\n        Got it!\n      </LinkButton>\n    );\n  }\n\n  const isExternalLink =\n    cta.link.startsWith('http://') || cta.link.startsWith('https://');\n\n  return isExternalLink ? (\n    <LinkButton\n      color=\"primary\"\n      style={{\n        gap: '5px',\n      }}\n      variant=\"outlined\"\n      to={cta.link}\n      onClick={onClick}\n    >\n      {cta.text}&nbsp;\n      <OpenInNewIcon\n        sx={{\n          fontSize: '15px',\n        }}\n      />\n    </LinkButton>\n  ) : (\n    <LinkButton\n      color=\"primary\"\n      variant=\"outlined\"\n      to={cta.link}\n      onClick={onClick}\n    >\n      {cta.text}\n    </LinkButton>\n  );\n};\n"],"names":[],"mappings":";;;;AAwBO,MAAM,iBAAoB,GAAA,CAAC,EAAE,GAAA,EAAK,SAAsC,KAAA;AAE7E,EAAA,IAAI,CAAC,GAAK,EAAA;AACR,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,SAAA;AAAA,QACN,OAAQ,EAAA,UAAA;AAAA,QACR,EAAG,EAAA,GAAA;AAAA,QACH,SAAS,CAAK,CAAA,KAAA;AACZ,UAAA,CAAA,CAAE,cAAe,EAAA;AACjB,UAAQ,OAAA,EAAA;AAAA,SACV;AAAA,QACD,QAAA,EAAA;AAAA;AAAA,KAED;AAAA;AAIJ,EAAM,MAAA,cAAA,GACJ,IAAI,IAAK,CAAA,UAAA,CAAW,SAAS,CAAK,IAAA,GAAA,CAAI,IAAK,CAAA,UAAA,CAAW,UAAU,CAAA;AAElE,EAAA,OAAO,cACL,mBAAA,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,GAAK,EAAA;AAAA,OACP;AAAA,MACA,OAAQ,EAAA,UAAA;AAAA,MACR,IAAI,GAAI,CAAA,IAAA;AAAA,MACR,OAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAI,GAAA,CAAA,IAAA;AAAA,QAAK,MAAA;AAAA,wBACV,GAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,QAAU,EAAA;AAAA;AACZ;AAAA;AACF;AAAA;AAAA,GAGF,mBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,OAAQ,EAAA,UAAA;AAAA,MACR,IAAI,GAAI,CAAA,IAAA;AAAA,MACR,OAAA;AAAA,MAEC,QAAI,EAAA,GAAA,CAAA;AAAA;AAAA,GACP;AAEJ;;;;"}

package/dist/components/QuickstartContent/QuickstartItem.esm.js

@@ -0,0 +1,132 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { useState, useEffect } from 'react';
+import { QuickstartItemIcon } from './QuickstartItemIcon.esm.js';
+import { QuickstartCtaLink } from './QuickstartCtaLink.esm.js';
+import IconButton from '@mui/material/IconButton';
+
+const QuickstartItem = ({
+  item,
+  setProgress,
+  index,
+  open,
+  handleOpen
+}) => {
+  const [stepCompleted, setStepCompleted] = useState(false);
+  const itemKey = `${item.title}-${index}`;
+  useEffect(() => {
+    const stepState = localStorage.getItem(itemKey);
+    if (stepState === "true") {
+      setStepCompleted(true);
+    }
+  }, [itemKey]);
+  useEffect(() => {
+    localStorage.setItem(itemKey, stepCompleted.toString());
+  }, [itemKey, stepCompleted]);
+  useEffect(() => {
+    if (stepCompleted) {
+      setProgress();
+    }
+  }, [stepCompleted, setProgress]);
+  return /* @__PURE__ */ jsxs(Box, { sx: { marginBottom: (theme) => `${theme.spacing(0.2)}` }, children: [
+    /* @__PURE__ */ jsxs(
+      ListItem,
+      {
+        onClick: handleOpen,
+        role: "button",
+        "aria-expanded": open,
+        "aria-label": `${open ? "Collapse" : "Expand"} ${item.title} details`,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleOpen();
+          }
+        },
+        sx: {
+          cursor: "pointer",
+          ...stepCompleted ? {
+            backgroundColor: (theme) => theme.palette.mode === "light" ? "#F3FAF2" : "#223D2D"
+          } : { backgroundColor: (theme) => theme.palette.background.paper }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            ListItemIcon,
+            {
+              sx: {
+                minWidth: "40px"
+              },
+              children: /* @__PURE__ */ jsx(
+                QuickstartItemIcon,
+                {
+                  icon: item.icon,
+                  sx: {
+                    ...open ? { color: (theme) => theme.palette.text.primary } : { color: (theme) => theme.palette.text.secondary }
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: item.title,
+              sx: {
+                "& .v5-MuiTypography-root": {
+                  fontWeight: (theme) => `${theme.typography.fontWeightMedium}!important`
+                },
+                ...open ? { color: (theme) => theme.palette.text.primary } : { color: (theme) => theme.palette.text.secondary }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": open ? "Collapse item" : "Expand item",
+              sx: {
+                ...open ? { color: (theme) => theme.palette.text.primary } : { color: (theme) => theme.palette.text.secondary }
+              },
+              children: open ? /* @__PURE__ */ jsx(ExpandLess, {}) : /* @__PURE__ */ jsx(ExpandMore, {})
+            }
+          )
+        ]
+      },
+      itemKey
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxs(
+      List,
+      {
+        component: "div",
+        disablePadding: true,
+        sx: {
+          ...stepCompleted ? {
+            backgroundColor: (theme) => theme.palette.mode === "light" ? "#F3FAF2" : "#223D2D"
+          } : { backgroundColor: (theme) => theme.palette.background.paper },
+          paddingBottom: "10px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(ListItemText, { primary: item.description }) }),
+          /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
+            QuickstartCtaLink,
+            {
+              cta: item.cta,
+              onClick: () => {
+                setStepCompleted(true);
+              }
+            }
+          ) })
+        ]
+      }
+    ) })
+  ] });
+};
+
+export { QuickstartItem };
+//# sourceMappingURL=QuickstartItem.esm.js.map

package/dist/components/QuickstartContent/QuickstartItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartItem.esm.js","sources":["../../../src/components/QuickstartContent/QuickstartItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport ExpandLess from '@mui/icons-material/ExpandLess';\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport Box from '@mui/material/Box';\nimport Collapse from '@mui/material/Collapse';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport { useEffect, useState } from 'react';\nimport { QuickstartItemIcon } from './QuickstartItemIcon';\nimport { QuickstartCtaLink } from './QuickstartCtaLink';\nimport IconButton from '@mui/material/IconButton';\nimport { QuickstartItemData } from '../../types';\n\nexport type QuickstartItemProps = {\n  item: QuickstartItemData;\n  setProgress: () => void;\n  index: number;\n  open: boolean;\n  handleOpen: () => void;\n};\n\nexport const QuickstartItem = ({\n  item,\n  setProgress,\n  index,\n  open,\n  handleOpen,\n}: QuickstartItemProps) => {\n  const [stepCompleted, setStepCompleted] = useState<boolean>(false);\n  const itemKey = `${item.title}-${index}`;\n\n  useEffect(() => {\n    const stepState = localStorage.getItem(itemKey);\n    if (stepState === 'true') {\n      setStepCompleted(true);\n    }\n  }, [itemKey]);\n\n  useEffect(() => {\n    localStorage.setItem(itemKey, stepCompleted.toString());\n  }, [itemKey, stepCompleted]);\n\n  useEffect(() => {\n    if (stepCompleted) {\n      setProgress();\n    }\n  }, [stepCompleted, setProgress]);\n\n  return (\n    <Box sx={{ marginBottom: theme => `${theme.spacing(0.2)}` }}>\n      <ListItem\n        key={itemKey}\n        onClick={handleOpen}\n        role=\"button\"\n        aria-expanded={open}\n        aria-label={`${open ? 'Collapse' : 'Expand'} ${item.title} details`}\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleOpen();\n          }\n        }}\n        sx={{\n          cursor: 'pointer',\n          ...(stepCompleted\n            ? {\n                backgroundColor: theme =>\n                  theme.palette.mode === 'light' ? '#F3FAF2' : '#223D2D',\n              }\n            : { backgroundColor: theme => theme.palette.background.paper }),\n        }}\n      >\n        <ListItemIcon\n          sx={{\n            minWidth: '40px',\n          }}\n        >\n          <QuickstartItemIcon\n            icon={item.icon}\n            sx={{\n              ...(open\n                ? { color: theme => theme.palette.text.primary }\n                : { color: theme => theme.palette.text.secondary }),\n            }}\n          />\n        </ListItemIcon>\n        <ListItemText\n          primary={item.title}\n          sx={{\n            '& .v5-MuiTypography-root': {\n              fontWeight: theme =>\n                `${theme.typography.fontWeightMedium}!important`,\n            },\n            ...(open\n              ? { color: theme => theme.palette.text.primary }\n              : { color: theme => theme.palette.text.secondary }),\n          }}\n        />\n        <IconButton\n          aria-label={open ? 'Collapse item' : 'Expand item'}\n          sx={{\n            ...(open\n              ? { color: theme => theme.palette.text.primary }\n              : { color: theme => theme.palette.text.secondary }),\n          }}\n        >\n          {open ? <ExpandLess /> : <ExpandMore />}\n        </IconButton>\n      </ListItem>\n      <Collapse in={open} timeout=\"auto\" unmountOnExit>\n        <List\n          component=\"div\"\n          disablePadding\n          sx={{\n            ...(stepCompleted\n              ? {\n                  backgroundColor: theme =>\n                    theme.palette.mode === 'light' ? '#F3FAF2' : '#223D2D',\n                }\n              : { backgroundColor: theme => theme.palette.background.paper }),\n            paddingBottom: '10px',\n          }}\n        >\n          <ListItem>\n            <ListItemText primary={item.description} />\n          </ListItem>\n          <ListItem>\n            <QuickstartCtaLink\n              cta={item.cta}\n              onClick={() => {\n                setStepCompleted(true);\n              }}\n            />\n          </ListItem>\n        </List>\n      </Collapse>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsCO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAkB,KAAK,CAAA;AACjE,EAAA,MAAM,OAAU,GAAA,CAAA,EAAG,IAAK,CAAA,KAAK,IAAI,KAAK,CAAA,CAAA;AAEtC,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,SAAA,GAAY,YAAa,CAAA,OAAA,CAAQ,OAAO,CAAA;AAC9C,IAAA,IAAI,cAAc,MAAQ,EAAA;AACxB,MAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA;AACvB,GACF,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,OAAQ,CAAA,OAAA,EAAS,aAAc,CAAA,QAAA,EAAU,CAAA;AAAA,GACrD,EAAA,CAAC,OAAS,EAAA,aAAa,CAAC,CAAA;AAE3B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,aAAe,EAAA;AACjB,MAAY,WAAA,EAAA;AAAA;AACd,GACC,EAAA,CAAC,aAAe,EAAA,WAAW,CAAC,CAAA;AAE/B,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,YAAc,EAAA,CAAA,KAAA,KAAS,CAAG,EAAA,KAAA,CAAM,OAAQ,CAAA,GAAG,CAAC,CAAA,CAAA,EACrD,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,OAAS,EAAA,UAAA;AAAA,QACT,IAAK,EAAA,QAAA;AAAA,QACL,eAAe,EAAA,IAAA;AAAA,QACf,cAAY,CAAG,EAAA,IAAA,GAAO,aAAa,QAAQ,CAAA,CAAA,EAAI,KAAK,KAAK,CAAA,QAAA,CAAA;AAAA,QACzD,QAAU,EAAA,CAAA;AAAA,QACV,WAAW,CAAK,CAAA,KAAA;AACd,UAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAA,CAAE,QAAQ,GAAK,EAAA;AACtC,YAAA,CAAA,CAAE,cAAe,EAAA;AACjB,YAAW,UAAA,EAAA;AAAA;AACb,SACF;AAAA,QACA,EAAI,EAAA;AAAA,UACF,MAAQ,EAAA,SAAA;AAAA,UACR,GAAI,aACA,GAAA;AAAA,YACE,iBAAiB,CACf,KAAA,KAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,UAAU,SAAY,GAAA;AAAA,cAEjD,EAAE,eAAA,EAAiB,WAAS,KAAM,CAAA,OAAA,CAAQ,WAAW,KAAM;AAAA,SACjE;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,EAAI,EAAA;AAAA,gBACF,QAAU,EAAA;AAAA,eACZ;AAAA,cAEA,QAAA,kBAAA,GAAA;AAAA,gBAAC,kBAAA;AAAA,gBAAA;AAAA,kBACC,MAAM,IAAK,CAAA,IAAA;AAAA,kBACX,EAAI,EAAA;AAAA,oBACF,GAAI,IACA,GAAA,EAAE,KAAO,EAAA,CAAA,KAAA,KAAS,MAAM,OAAQ,CAAA,IAAA,CAAK,OAAQ,EAAA,GAC7C,EAAE,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,KAAK,SAAU;AAAA;AACrD;AAAA;AACF;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,SAAS,IAAK,CAAA,KAAA;AAAA,cACd,EAAI,EAAA;AAAA,gBACF,0BAA4B,EAAA;AAAA,kBAC1B,UAAY,EAAA,CAAA,KAAA,KACV,CAAG,EAAA,KAAA,CAAM,WAAW,gBAAgB,CAAA,UAAA;AAAA,iBACxC;AAAA,gBACA,GAAI,IACA,GAAA,EAAE,KAAO,EAAA,CAAA,KAAA,KAAS,MAAM,OAAQ,CAAA,IAAA,CAAK,OAAQ,EAAA,GAC7C,EAAE,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,KAAK,SAAU;AAAA;AACrD;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAY,OAAO,eAAkB,GAAA,aAAA;AAAA,cACrC,EAAI,EAAA;AAAA,gBACF,GAAI,IACA,GAAA,EAAE,KAAO,EAAA,CAAA,KAAA,KAAS,MAAM,OAAQ,CAAA,IAAA,CAAK,OAAQ,EAAA,GAC7C,EAAE,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,KAAK,SAAU;AAAA,eACrD;AAAA,cAEC,QAAO,EAAA,IAAA,mBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,CAAA,uBAAM,UAAW,EAAA,EAAA;AAAA;AAAA;AACvC;AAAA,OAAA;AAAA,MAzDK;AAAA,KA0DP;AAAA,wBACC,QAAS,EAAA,EAAA,EAAA,EAAI,MAAM,OAAQ,EAAA,MAAA,EAAO,eAAa,IAC9C,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,KAAA;AAAA,QACV,cAAc,EAAA,IAAA;AAAA,QACd,EAAI,EAAA;AAAA,UACF,GAAI,aACA,GAAA;AAAA,YACE,iBAAiB,CACf,KAAA,KAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,UAAU,SAAY,GAAA;AAAA,cAEjD,EAAE,eAAA,EAAiB,WAAS,KAAM,CAAA,OAAA,CAAQ,WAAW,KAAM,EAAA;AAAA,UAC/D,aAAe,EAAA;AAAA,SACjB;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EAAa,OAAS,EAAA,IAAA,CAAK,aAAa,CAC3C,EAAA,CAAA;AAAA,8BACC,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,iBAAA;AAAA,YAAA;AAAA,cACC,KAAK,IAAK,CAAA,GAAA;AAAA,cACV,SAAS,MAAM;AACb,gBAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA;AACvB;AAAA,WAEJ,EAAA;AAAA;AAAA;AAAA,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/QuickstartContent/QuickstartItemIcon.esm.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import MuiIcon from '@mui/material/Icon';
+import AdminPanelSettingsOutlinedIcon from '@mui/icons-material/AdminPanelSettingsOutlined';
+import VpnKeyOutlinedIcon from '@mui/icons-material/VpnKeyOutlined';
+import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';
+import PowerOutlinedIcon from '@mui/icons-material/PowerOutlined';
+import { useApp } from '@backstage/core-plugin-api';
+import Box from '@mui/material/Box';
+
+const commonIcons = {
+  Admin: /* @__PURE__ */ jsx(AdminPanelSettingsOutlinedIcon, {}),
+  Rbac: /* @__PURE__ */ jsx(VpnKeyOutlinedIcon, {}),
+  Git: /* @__PURE__ */ jsx(FileCopyOutlinedIcon, {}),
+  Plugins: /* @__PURE__ */ jsx(PowerOutlinedIcon, {})
+};
+const QuickstartItemIcon = ({ icon, sx }) => {
+  const app = useApp();
+  if (!icon) {
+    return null;
+  }
+  const SystemIcon = app.getSystemIcon(icon);
+  if (SystemIcon) {
+    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", ...sx }, children: /* @__PURE__ */ jsx(SystemIcon, { fontSize: "medium" }) });
+  }
+  if (icon.startsWith("<svg")) {
+    const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;
+    return /* @__PURE__ */ jsx(MuiIcon, { fontSize: "medium", sx, children: /* @__PURE__ */ jsx("img", { src: svgDataUri, alt: "" }) });
+  }
+  if (icon.startsWith("https://") || icon.startsWith("http://") || icon.startsWith("/")) {
+    return /* @__PURE__ */ jsx(
+      MuiIcon,
+      {
+        fontSize: "medium",
+        baseClassName: "material-icons-outlined",
+        sx,
+        children: /* @__PURE__ */ jsx("img", { src: icon, alt: "", height: "100%", width: "100%" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MuiIcon, { fontSize: "medium", baseClassName: "material-icons-outlined", sx, children: commonIcons[icon] || icon });
+};
+
+export { QuickstartItemIcon };
+//# sourceMappingURL=QuickstartItemIcon.esm.js.map

package/dist/components/QuickstartContent/QuickstartItemIcon.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartItemIcon.esm.js","sources":["../../../src/components/QuickstartContent/QuickstartItemIcon.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport MuiIcon from '@mui/material/Icon';\nimport AdminPanelSettingsOutlinedIcon from '@mui/icons-material/AdminPanelSettingsOutlined';\nimport VpnKeyOutlinedIcon from '@mui/icons-material/VpnKeyOutlined';\nimport FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';\nimport PowerOutlinedIcon from '@mui/icons-material/PowerOutlined';\nimport { SxProps, Theme } from '@mui/material/styles';\nimport { useApp } from '@backstage/core-plugin-api';\nimport Box from '@mui/material/Box';\n\nexport interface QuickstartItemIconProps {\n  icon?: string;\n  sx?: SxProps<Theme>;\n}\n\nconst commonIcons: {\n  [k: string]: React.ReactNode;\n} = {\n  Admin: <AdminPanelSettingsOutlinedIcon />,\n  Rbac: <VpnKeyOutlinedIcon />,\n  Git: <FileCopyOutlinedIcon />,\n  Plugins: <PowerOutlinedIcon />,\n};\n\nexport const QuickstartItemIcon = ({ icon, sx }: QuickstartItemIconProps) => {\n  const app = useApp();\n  if (!icon) {\n    return null;\n  }\n\n  const SystemIcon = app.getSystemIcon(icon);\n  if (SystemIcon) {\n    return (\n      <Box sx={{ display: 'flex', alignItems: 'center', ...sx }}>\n        <SystemIcon fontSize=\"medium\" />\n      </Box>\n    );\n  }\n\n  if (icon.startsWith('<svg')) {\n    const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;\n    return (\n      <MuiIcon fontSize=\"medium\" sx={sx}>\n        <img src={svgDataUri} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  if (\n    icon.startsWith('https://') ||\n    icon.startsWith('http://') ||\n    icon.startsWith('/')\n  ) {\n    return (\n      <MuiIcon\n        fontSize=\"medium\"\n        baseClassName=\"material-icons-outlined\"\n        sx={sx}\n      >\n        <img src={icon} alt=\"\" height=\"100%\" width=\"100%\" />\n      </MuiIcon>\n    );\n  }\n\n  return (\n    <MuiIcon fontSize=\"medium\" baseClassName=\"material-icons-outlined\" sx={sx}>\n      {commonIcons[icon] || icon}\n    </MuiIcon>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8BA,MAAM,WAEF,GAAA;AAAA,EACF,KAAA,sBAAQ,8BAA+B,EAAA,EAAA,CAAA;AAAA,EACvC,IAAA,sBAAO,kBAAmB,EAAA,EAAA,CAAA;AAAA,EAC1B,GAAA,sBAAM,oBAAqB,EAAA,EAAA,CAAA;AAAA,EAC3B,OAAA,sBAAU,iBAAkB,EAAA,EAAA;AAC9B,CAAA;AAEO,MAAM,kBAAqB,GAAA,CAAC,EAAE,IAAA,EAAM,IAAkC,KAAA;AAC3E,EAAA,MAAM,MAAM,MAAO,EAAA;AACnB,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,UAAA,GAAa,GAAI,CAAA,aAAA,CAAc,IAAI,CAAA;AACzC,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,IACnD,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,QAAA,EAAS,UAAS,CAChC,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,MAAM,CAAG,EAAA;AAC3B,IAAA,MAAM,UAAa,GAAA,CAAA,0BAAA,EAA6B,IAAK,CAAA,IAAI,CAAC,CAAA,CAAA;AAC1D,IACE,uBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,QAAA,EAAS,QAAS,EAAA,EAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,UAAA,EAAY,GAAI,EAAA,EAAA,EAAG,CAC/B,EAAA,CAAA;AAAA;AAIJ,EACE,IAAA,IAAA,CAAK,UAAW,CAAA,UAAU,CAC1B,IAAA,IAAA,CAAK,UAAW,CAAA,SAAS,CACzB,IAAA,IAAA,CAAK,UAAW,CAAA,GAAG,CACnB,EAAA;AACA,IACE,uBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,QAAA;AAAA,QACT,aAAc,EAAA,yBAAA;AAAA,QACd,EAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,SAAI,GAAK,EAAA,IAAA,EAAM,KAAI,EAAG,EAAA,MAAA,EAAO,MAAO,EAAA,KAAA,EAAM,MAAO,EAAA;AAAA;AAAA,KACpD;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,QAAA,EAAS,QAAS,EAAA,aAAA,EAAc,2BAA0B,EAChE,EAAA,QAAA,EAAA,WAAA,CAAY,IAAI,CAAA,IAAK,IACxB,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/QuickstartDrawer.esm.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import Drawer from '@mui/material/Drawer';
+import { useApiHolder, configApiRef } from '@backstage/core-plugin-api';
+import { Quickstart } from './Quickstart.esm.js';
+import { useQuickstartDrawerContext } from '../hooks/useQuickstartDrawerContext.esm.js';
+
+const QuickstartDrawer = () => {
+  const { isDrawerOpen, closeDrawer, drawerWidth } = useQuickstartDrawerContext();
+  const apiHolder = useApiHolder();
+  const config = apiHolder.get(configApiRef);
+  const quickstartItems = config?.has("app.quickstart") ? config.get("app.quickstart") : [];
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      sx: {
+        "& .v5-MuiDrawer-paper": {
+          width: drawerWidth,
+          boxSizing: "border-box",
+          backgroundColor: (theme) => `${theme.palette?.rhdh?.general.sidebarBackgroundColor}`,
+          justifyContent: "space-between"
+        }
+      },
+      variant: "persistent",
+      anchor: "right",
+      open: isDrawerOpen,
+      children: /* @__PURE__ */ jsx(
+        Quickstart,
+        {
+          quickstartItems,
+          handleDrawerClose: closeDrawer
+        }
+      )
+    }
+  );
+};
+
+export { QuickstartDrawer };
+//# sourceMappingURL=QuickstartDrawer.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartDrawer.esm.js","sources":["../../src/components/QuickstartDrawer.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Drawer from '@mui/material/Drawer';\nimport { ThemeConfig } from '@red-hat-developer-hub/backstage-plugin-theme';\nimport { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Quickstart } from './Quickstart';\nimport { useQuickstartDrawerContext } from '../hooks/useQuickstartDrawerContext';\nimport { QuickstartItemData } from '../types';\n\nexport const QuickstartDrawer = () => {\n  const { isDrawerOpen, closeDrawer, drawerWidth } =\n    useQuickstartDrawerContext();\n\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const quickstartItems: QuickstartItemData[] = config?.has('app.quickstart')\n    ? config.get('app.quickstart')\n    : [];\n  return (\n    <Drawer\n      sx={{\n        '& .v5-MuiDrawer-paper': {\n          width: drawerWidth,\n          boxSizing: 'border-box',\n          backgroundColor: theme =>\n            `${\n              (theme as ThemeConfig).palette?.rhdh?.general\n                .sidebarBackgroundColor\n            }`,\n          justifyContent: 'space-between',\n        },\n      }}\n      variant=\"persistent\"\n      anchor=\"right\"\n      open={isDrawerOpen}\n    >\n      <Quickstart\n        quickstartItems={quickstartItems}\n        handleDrawerClose={closeDrawer}\n      />\n    </Drawer>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,YAAA,EAAc,WAAa,EAAA,WAAA,KACjC,0BAA2B,EAAA;AAE7B,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACzC,EAAM,MAAA,eAAA,GAAwC,QAAQ,GAAI,CAAA,gBAAgB,IACtE,MAAO,CAAA,GAAA,CAAI,gBAAgB,CAAA,GAC3B,EAAC;AACL,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,uBAAyB,EAAA;AAAA,UACvB,KAAO,EAAA,WAAA;AAAA,UACP,SAAW,EAAA,YAAA;AAAA,UACX,iBAAiB,CACf,KAAA,KAAA,CAAA,EACG,MAAsB,OAAS,EAAA,IAAA,EAAM,QACnC,sBACL,CAAA,CAAA;AAAA,UACF,cAAgB,EAAA;AAAA;AAClB,OACF;AAAA,MACA,OAAQ,EAAA,YAAA;AAAA,MACR,MAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,YAAA;AAAA,MAEN,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,eAAA;AAAA,UACA,iBAAmB,EAAA;AAAA;AAAA;AACrB;AAAA,GACF;AAEJ;;;;"}

package/dist/components/QuickstartDrawerContext.esm.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const QuickstartDrawerContext = createContext(void 0);
+
+export { QuickstartDrawerContext };
+//# sourceMappingURL=QuickstartDrawerContext.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartDrawerContext.esm.js","sources":["../../src/components/QuickstartDrawerContext.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createContext } from 'react';\n\n/**\n * Type for QuickstartDrawerContext\n *\n *  @public\n */\nexport interface QuickstartDrawerContextType {\n  /**\n   * The prop to check if the drawer is open\n   */\n  isDrawerOpen: boolean;\n  /**\n   * The function to open the drawer\n   */\n  openDrawer: () => void;\n  /**\n   * The function to close the drawer\n   */\n  closeDrawer: () => void;\n  /**\n   * The function to toggle the drawer state\n   */\n  toggleDrawer: () => void;\n  /**\n   * The prop for drawer width\n   */\n  drawerWidth: number;\n  /**\n   * The function for setting the drawer width\n   */\n  setDrawerWidth: React.Dispatch<React.SetStateAction<number>>;\n}\n\n/**\n * @public\n */\nexport const QuickstartDrawerContext = createContext<\n  QuickstartDrawerContextType | undefined\n>(undefined);\n"],"names":[],"mappings":";;AAqDa,MAAA,uBAAA,GAA0B,cAErC,MAAS;;;;"}

package/dist/components/QuickstartDrawerProvider.esm.js

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
+import { QuickstartDrawerContext } from './QuickstartDrawerContext.esm.js';
+import { QuickstartDrawer } from './QuickstartDrawer.esm.js';
+import Box from '@mui/material/Box';
+import { useQuickstartPermission } from '../hooks/useQuickstartPermission.esm.js';
+import { useLocalStorageState } from '../hooks/useLocalStorageState.esm.js';
+
+const QuickstartDrawerProvider = ({ children }) => {
+  const isAllowed = useQuickstartPermission();
+  const [isDrawerOpen, setIsDrawerOpen] = useLocalStorageState(
+    "quickstart-drawer-open",
+    false,
+    isAllowed
+  );
+  const [showNotification, setShowNotification] = useState(false);
+  const [hasShownNotification, setHasShownNotification] = useState(false);
+  const [drawerWidth, setDrawerWidth] = useState(500);
+  useEffect(() => {
+    const hasVisited = localStorage.getItem("quickstart-visited");
+    const notificationShown = localStorage.getItem(
+      "quickstart-notification-shown"
+    );
+    if (isAllowed) {
+      if (!hasVisited) {
+        setIsDrawerOpen(true);
+        localStorage.setItem("quickstart-visited", "true");
+      }
+    }
+    setHasShownNotification(notificationShown === "true");
+  }, [isAllowed, setIsDrawerOpen]);
+  const openDrawer = () => setIsDrawerOpen(true);
+  const closeDrawer = () => {
+    setIsDrawerOpen(false);
+    if (!hasShownNotification) {
+      setShowNotification(true);
+      setHasShownNotification(true);
+      localStorage.setItem("quickstart-notification-shown", "true");
+    }
+  };
+  const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
+  const handleNotificationClose = () => setShowNotification(false);
+  return /* @__PURE__ */ jsxs(
+    QuickstartDrawerContext.Provider,
+    {
+      value: {
+        isDrawerOpen,
+        openDrawer,
+        closeDrawer,
+        toggleDrawer,
+        setDrawerWidth,
+        drawerWidth
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              ...!isDrawerOpen ? { marginRight: "0px" } : { marginRight: `${drawerWidth}px` }
+            },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(QuickstartDrawer, {}),
+        /* @__PURE__ */ jsx(
+          Snackbar,
+          {
+            sx: { top: "80px !important" },
+            open: showNotification,
+            autoHideDuration: 1e4,
+            onClose: handleNotificationClose,
+            anchorOrigin: { vertical: "top", horizontal: "right" },
+            message: "Need help? Visit the Quick Start Guide by clicking on this (?) icon in the header!",
+            action: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                "aria-label": "close",
+                color: "inherit",
+                onClick: handleNotificationClose,
+                children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { QuickstartDrawerProvider };
+//# sourceMappingURL=QuickstartDrawerProvider.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartDrawerProvider.esm.js","sources":["../../src/components/QuickstartDrawerProvider.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, PropsWithChildren, useState } from 'react';\nimport Snackbar from '@mui/material/Snackbar';\nimport CloseIcon from '@mui/icons-material/Close';\nimport IconButton from '@mui/material/IconButton';\nimport { QuickstartDrawerContext } from './QuickstartDrawerContext';\nimport { QuickstartDrawer } from './QuickstartDrawer';\nimport Box from '@mui/material/Box';\nimport { useQuickstartPermission } from '../hooks/useQuickstartPermission';\nimport { useLocalStorageState } from '../hooks/useLocalStorageState';\n\nexport const QuickstartDrawerProvider = ({ children }: PropsWithChildren) => {\n  const isAllowed = useQuickstartPermission();\n  const [isDrawerOpen, setIsDrawerOpen] = useLocalStorageState<boolean>(\n    'quickstart-drawer-open',\n    false,\n    isAllowed,\n  );\n  const [showNotification, setShowNotification] = useState(false);\n  const [hasShownNotification, setHasShownNotification] = useState(false);\n  const [drawerWidth, setDrawerWidth] = useState<number>(500);\n\n  useEffect(() => {\n    const hasVisited = localStorage.getItem('quickstart-visited');\n    const notificationShown = localStorage.getItem(\n      'quickstart-notification-shown',\n    );\n\n    if (isAllowed) {\n      if (!hasVisited) {\n        setIsDrawerOpen(true);\n        localStorage.setItem('quickstart-visited', 'true');\n      }\n    }\n\n    setHasShownNotification(notificationShown === 'true');\n  }, [isAllowed, setIsDrawerOpen]);\n\n  const openDrawer = () => setIsDrawerOpen(true);\n  const closeDrawer = () => {\n    setIsDrawerOpen(false);\n    if (!hasShownNotification) {\n      setShowNotification(true);\n      setHasShownNotification(true);\n      localStorage.setItem('quickstart-notification-shown', 'true');\n    }\n  };\n  const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);\n  const handleNotificationClose = () => setShowNotification(false);\n\n  return (\n    <QuickstartDrawerContext.Provider\n      value={{\n        isDrawerOpen,\n        openDrawer,\n        closeDrawer,\n        toggleDrawer,\n        setDrawerWidth,\n        drawerWidth,\n      }}\n    >\n      <Box\n        sx={{\n          ...(!isDrawerOpen\n            ? { marginRight: '0px' }\n            : { marginRight: `${drawerWidth}px` }),\n        }}\n      >\n        {children}\n      </Box>\n      <QuickstartDrawer />\n      <Snackbar\n        sx={{ top: '80px !important' }}\n        open={showNotification}\n        autoHideDuration={10000}\n        onClose={handleNotificationClose}\n        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        message=\"Need help? Visit the Quick Start Guide by clicking on this (?) icon in the header!\"\n        action={\n          <IconButton\n            size=\"small\"\n            aria-label=\"close\"\n            color=\"inherit\"\n            onClick={handleNotificationClose}\n          >\n            <CloseIcon fontSize=\"small\" />\n          </IconButton>\n        }\n      />\n    </QuickstartDrawerContext.Provider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/QuickstartFooter.esm.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import LinearProgress from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+
+const QuickstartFooter = ({
+  handleDrawerClose,
+  progress
+}) => {
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: progress }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: (theme) => `${theme.spacing(2.5)}`
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.caption }, children: progress > 0 ? `${progress}% progress` : "Not started" }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => handleDrawerClose(), children: "Hide" })
+        ]
+      }
+    )
+  ] });
+};
+
+export { QuickstartFooter };
+//# sourceMappingURL=QuickstartFooter.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartFooter.esm.js","sources":["../../src/components/QuickstartFooter.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport Typography from '@mui/material/Typography';\n\nexport type QuickstartFooterProps = {\n  handleDrawerClose: () => void;\n  progress: number;\n};\n\nexport const QuickstartFooter = ({\n  handleDrawerClose,\n  progress,\n}: QuickstartFooterProps) => {\n  return (\n    <Box>\n      <LinearProgress variant=\"determinate\" value={progress} />\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: theme => `${theme.spacing(2.5)}`,\n        }}\n      >\n        <Typography sx={{ fontSize: theme => theme.typography.caption }}>\n          {progress > 0 ? `${progress}% progress` : 'Not started'}\n        </Typography>\n        <Button onClick={() => handleDrawerClose()}>Hide</Button>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,iBAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,OAAA,EAAQ,aAAc,EAAA,KAAA,EAAO,QAAU,EAAA,CAAA;AAAA,oBACvD,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA,eAAA;AAAA,UAChB,SAAS,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,SACzC;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,WAAS,KAAM,CAAA,UAAA,CAAW,OAAQ,EAAA,EAC3D,QAAW,EAAA,QAAA,GAAA,CAAA,GAAI,CAAG,EAAA,QAAQ,eAAe,aAC5C,EAAA,CAAA;AAAA,8BACC,MAAO,EAAA,EAAA,OAAA,EAAS,MAAM,iBAAA,IAAqB,QAAI,EAAA,MAAA,EAAA;AAAA;AAAA;AAAA;AAClD,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/QuickstartHeader.esm.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import quickstartImage from '../assets/quickstart-image.png';
+
+const QuickstartHeader = () => {
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      sx: {
+        justifyContent: "center",
+        display: "flex",
+        flexFlow: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: quickstartImage,
+            alt: "",
+            width: "128px",
+            style: { backgroundColor: "#f2f2f2" }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              flexFlow: "column",
+              padding: (theme) => `${theme.spacing(3)} 0px`
+            },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.h6 }, children: "Let's get you started with Developer Hub" }),
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.caption }, children: "We'll guide you through a few quick steps" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { QuickstartHeader };
+//# sourceMappingURL=QuickstartHeader.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartHeader.esm.js","sources":["../../src/components/QuickstartHeader.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport Toolbar from '@mui/material/Toolbar';\nimport Typography from '@mui/material/Typography';\nimport quickstartImage from '../assets/quickstart-image.png';\n\nexport const QuickstartHeader = () => {\n  return (\n    <Toolbar\n      sx={{\n        justifyContent: 'center',\n        display: 'flex',\n        flexFlow: 'column',\n      }}\n    >\n      <img\n        src={quickstartImage}\n        alt=\"\"\n        width=\"128px\"\n        style={{ backgroundColor: '#f2f2f2' }}\n      />\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          flexFlow: 'column',\n          padding: theme => `${theme.spacing(3)} 0px`,\n        }}\n      >\n        <Typography sx={{ fontSize: theme => theme.typography.h6 }}>\n          Let's get you started with Developer Hub\n        </Typography>\n        <Typography sx={{ fontSize: theme => theme.typography.caption }}>\n          We'll guide you through a few quick steps\n        </Typography>\n      </Box>\n    </Toolbar>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,MAAM;AACpC,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,cAAgB,EAAA,QAAA;AAAA,QAChB,OAAS,EAAA,MAAA;AAAA,QACT,QAAU,EAAA;AAAA,OACZ;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAK,EAAA,eAAA;AAAA,YACL,GAAI,EAAA,EAAA;AAAA,YACJ,KAAM,EAAA,OAAA;AAAA,YACN,KAAA,EAAO,EAAE,eAAA,EAAiB,SAAU;AAAA;AAAA,SACtC;AAAA,wBACA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,UAAY,EAAA,QAAA;AAAA,cACZ,OAAS,EAAA,MAAA;AAAA,cACT,QAAU,EAAA,QAAA;AAAA,cACV,SAAS,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,IAAA;AAAA,aACvC;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,UAAA,EAAA,EAAW,IAAI,EAAE,QAAA,EAAU,WAAS,KAAM,CAAA,UAAA,CAAW,EAAG,EAAA,EAAG,QAE5D,EAAA,0CAAA,EAAA,CAAA;AAAA,8BACA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,WAAS,KAAM,CAAA,UAAA,CAAW,OAAQ,EAAA,EAAG,QAEjE,EAAA,2CAAA,EAAA;AAAA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/hooks/useLocalStorageState.esm.js

@@ -0,0 +1,28 @@
+import { useCallback, useState, useEffect } from 'react';
+
+function useLocalStorageState(key, defaultValue, isAllowed) {
+  const readValue = useCallback(() => {
+    try {
+      const stored = localStorage.getItem(key);
+      return isAllowed && stored !== null ? JSON.parse(stored) : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  }, [defaultValue, isAllowed, key]);
+  const [value, setValue] = useState(readValue);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const local = readValue();
+      setValue((prev) => prev !== local ? local : prev);
+    }, 500);
+    return () => clearInterval(interval);
+  }, [readValue]);
+  const updateValue = (newValue) => {
+    setValue(newValue);
+    localStorage.setItem(key, JSON.stringify(newValue));
+  };
+  return [value, updateValue];
+}
+
+export { useLocalStorageState };
+//# sourceMappingURL=useLocalStorageState.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalStorageState.esm.js","sources":["../../src/hooks/useLocalStorageState.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useEffect, useState } from 'react';\n\nexport function useLocalStorageState<T extends string | number | boolean>(\n  key: string,\n  defaultValue: T,\n  isAllowed: boolean,\n): [T, (value: T) => void] {\n  const readValue = useCallback((): T => {\n    try {\n      const stored = localStorage.getItem(key);\n      return isAllowed && stored !== null ? JSON.parse(stored) : defaultValue;\n    } catch {\n      return defaultValue;\n    }\n  }, [defaultValue, isAllowed, key]);\n\n  const [value, setValue] = useState<T>(readValue);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      const local = readValue();\n      setValue(prev => (prev !== local ? local : prev));\n    }, 500);\n    return () => clearInterval(interval);\n  }, [readValue]);\n\n  const updateValue = (newValue: T) => {\n    setValue(newValue);\n    localStorage.setItem(key, JSON.stringify(newValue));\n  };\n\n  return [value, updateValue];\n}\n"],"names":[],"mappings":";;AAkBgB,SAAA,oBAAA,CACd,GACA,EAAA,YAAA,EACA,SACyB,EAAA;AACzB,EAAM,MAAA,SAAA,GAAY,YAAY,MAAS;AACrC,IAAI,IAAA;AACF,MAAM,MAAA,MAAA,GAAS,YAAa,CAAA,OAAA,CAAQ,GAAG,CAAA;AACvC,MAAA,OAAO,aAAa,MAAW,KAAA,IAAA,GAAO,IAAK,CAAA,KAAA,CAAM,MAAM,CAAI,GAAA,YAAA;AAAA,KACrD,CAAA,MAAA;AACN,MAAO,OAAA,YAAA;AAAA;AACT,GACC,EAAA,CAAC,YAAc,EAAA,SAAA,EAAW,GAAG,CAAC,CAAA;AAEjC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAY,SAAS,CAAA;AAE/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,MAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,MAAA,QAAA,CAAS,CAAS,IAAA,KAAA,IAAA,KAAS,KAAQ,GAAA,KAAA,GAAQ,IAAK,CAAA;AAAA,OAC/C,GAAG,CAAA;AACN,IAAO,OAAA,MAAM,cAAc,QAAQ,CAAA;AAAA,GACrC,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAM,MAAA,WAAA,GAAc,CAAC,QAAgB,KAAA;AACnC,IAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,IAAA,YAAA,CAAa,OAAQ,CAAA,GAAA,EAAK,IAAK,CAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AAAA,GACpD;AAEA,EAAO,OAAA,CAAC,OAAO,WAAW,CAAA;AAC5B;;;;"}

package/dist/hooks/useQuickstartDrawerContext.esm.js

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { QuickstartDrawerContext } from '../components/QuickstartDrawerContext.esm.js';
+
+const useQuickstartDrawerContext = () => {
+  const context = useContext(QuickstartDrawerContext);
+  if (!context) {
+    throw new Error(
+      "useQuickStartDrawer must be used within a QuickStartDrawerProvider"
+    );
+  }
+  return context;
+};
+
+export { useQuickstartDrawerContext };
+//# sourceMappingURL=useQuickstartDrawerContext.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useQuickstartDrawerContext.esm.js","sources":["../../src/hooks/useQuickstartDrawerContext.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useContext } from 'react';\nimport {\n  QuickstartDrawerContext,\n  QuickstartDrawerContextType,\n} from '../components/QuickstartDrawerContext';\n\n/**\n * Hook for retrieving the drawer context\n *\n * @public\n */\nexport const useQuickstartDrawerContext = (): QuickstartDrawerContextType => {\n  const context = useContext(QuickstartDrawerContext);\n  if (!context) {\n    throw new Error(\n      'useQuickStartDrawer must be used within a QuickStartDrawerProvider',\n    );\n  }\n  return context;\n};\n"],"names":[],"mappings":";;;AA2BO,MAAM,6BAA6B,MAAmC;AAC3E,EAAM,MAAA,OAAA,GAAU,WAAW,uBAAuB,CAAA;AAClD,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;"}

package/dist/hooks/useQuickstartPermission.esm.js

@@ -0,0 +1,27 @@
+import { useApi, identityApiRef, configApiRef } from '@backstage/core-plugin-api';
+import { useAsync } from 'react-use';
+
+const useQuickstartPermission = () => {
+  const identityApi = useApi(identityApiRef);
+  const configApi = useApi(configApiRef);
+  const getUserAuthorization = async () => {
+    const { token: idToken } = await identityApi.getCredentials();
+    const backendUrl = configApi.getString("backend.baseUrl");
+    const jsonResponse = await fetch(`${backendUrl}/api/permission/`, {
+      headers: {
+        ...idToken && { Authorization: `Bearer ${idToken}` }
+      }
+    });
+    return jsonResponse.json();
+  };
+  const { loading: isUserLoading, value: result } = useAsync(
+    async () => await getUserAuthorization(),
+    []
+  );
+  const isRBACPluginEnabled = configApi.getOptionalBoolean("permission.enabled");
+  if (!isRBACPluginEnabled) return true;
+  return !isUserLoading && result.status === "Authorized";
+};
+
+export { useQuickstartPermission };
+//# sourceMappingURL=useQuickstartPermission.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useQuickstartPermission.esm.js","sources":["../../src/hooks/useQuickstartPermission.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  configApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { useAsync } from 'react-use';\n\nexport const useQuickstartPermission = () => {\n  const identityApi = useApi(identityApiRef);\n  const configApi = useApi(configApiRef);\n\n  const getUserAuthorization = async () => {\n    const { token: idToken } = await identityApi.getCredentials();\n    const backendUrl = configApi.getString('backend.baseUrl');\n    const jsonResponse = await fetch(`${backendUrl}/api/permission/`, {\n      headers: {\n        ...(idToken && { Authorization: `Bearer ${idToken}` }),\n      },\n    });\n    return jsonResponse.json();\n  };\n  const { loading: isUserLoading, value: result } = useAsync(\n    async () => await getUserAuthorization(),\n    [],\n  );\n\n  const isRBACPluginEnabled =\n    configApi.getOptionalBoolean('permission.enabled');\n\n  if (!isRBACPluginEnabled) return true;\n\n  return !isUserLoading && result.status === 'Authorized';\n};\n"],"names":[],"mappings":";;;AAuBO,MAAM,0BAA0B,MAAM;AAC3C,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AAErC,EAAA,MAAM,uBAAuB,YAAY;AACvC,IAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAY,GAAA,MAAM,YAAY,cAAe,EAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,SAAU,CAAA,SAAA,CAAU,iBAAiB,CAAA;AACxD,IAAA,MAAM,YAAe,GAAA,MAAM,KAAM,CAAA,CAAA,EAAG,UAAU,CAAoB,gBAAA,CAAA,EAAA;AAAA,MAChE,OAAS,EAAA;AAAA,QACP,GAAI,OAAW,IAAA,EAAE,aAAe,EAAA,CAAA,OAAA,EAAU,OAAO,CAAG,CAAA;AAAA;AACtD,KACD,CAAA;AACD,IAAA,OAAO,aAAa,IAAK,EAAA;AAAA,GAC3B;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,aAAe,EAAA,KAAA,EAAO,QAAW,GAAA,QAAA;AAAA,IAChD,YAAY,MAAM,oBAAqB,EAAA;AAAA,IACvC;AAAC,GACH;AAEA,EAAM,MAAA,mBAAA,GACJ,SAAU,CAAA,kBAAA,CAAmB,oBAAoB,CAAA;AAEnD,EAAI,IAAA,CAAC,qBAA4B,OAAA,IAAA;AAEjC,EAAO,OAAA,CAAC,aAAiB,IAAA,MAAA,CAAO,MAAW,KAAA,YAAA;AAC7C;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import { PropsWithChildren } from 'react';
+
+/**
+ * Quick start plugin
+ *
+ * @public
+ */
+declare const quickstartPlugin: _backstage_core_plugin_api.BackstagePlugin<{}, {}, {}>;
+/**
+ * Quick start drawer provider
+ *
+ * @public
+ */
+declare const QuickstartDrawerProvider: React.ComponentType<PropsWithChildren>;
+
+/**
+ * Type for QuickstartDrawerContext
+ *
+ *  @public
+ */
+interface QuickstartDrawerContextType {
+    /**
+     * The prop to check if the drawer is open
+     */
+    isDrawerOpen: boolean;
+    /**
+     * The function to open the drawer
+     */
+    openDrawer: () => void;
+    /**
+     * The function to close the drawer
+     */
+    closeDrawer: () => void;
+    /**
+     * The function to toggle the drawer state
+     */
+    toggleDrawer: () => void;
+    /**
+     * The prop for drawer width
+     */
+    drawerWidth: number;
+    /**
+     * The function for setting the drawer width
+     */
+    setDrawerWidth: React.Dispatch<React.SetStateAction<number>>;
+}
+
+/**
+ * Hook for retrieving the drawer context
+ *
+ * @public
+ */
+declare const useQuickstartDrawerContext: () => QuickstartDrawerContextType;
+
+export { QuickstartDrawerProvider, quickstartPlugin, useQuickstartDrawerContext };
+export type { QuickstartDrawerContextType };

package/dist/index.esm.js

@@ -0,0 +1,8 @@
+import { unstable_ClassNameGenerator } from '@mui/material/className';
+export { QuickstartDrawerProvider, quickstartPlugin } from './plugin.esm.js';
+export { useQuickstartDrawerContext } from './hooks/useQuickstartDrawerContext.esm.js';
+
+unstable_ClassNameGenerator.configure((componentName) => {
+  return componentName.startsWith("v5-") ? componentName : `v5-${componentName}`;
+});
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/index.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';\n\nClassNameGenerator.configure(componentName => {\n  return componentName.startsWith('v5-')\n    ? componentName\n    : `v5-${componentName}`;\n});\n\nexport { quickstartPlugin, QuickstartDrawerProvider } from './plugin';\nexport { useQuickstartDrawerContext } from './hooks/useQuickstartDrawerContext';\nexport type { QuickstartDrawerContextType } from './components/QuickstartDrawerContext';\n"],"names":["ClassNameGenerator"],"mappings":";;;;AAkBAA,2BAAA,CAAmB,UAAU,CAAiB,aAAA,KAAA;AAC5C,EAAA,OAAO,cAAc,UAAW,CAAA,KAAK,CACjC,GAAA,aAAA,GACA,MAAM,aAAa,CAAA,CAAA;AACzB,CAAC,CAAA"}

package/dist/plugin.esm.js

@@ -0,0 +1,18 @@
+import { createPlugin, createComponentExtension } from '@backstage/core-plugin-api';
+
+const quickstartPlugin = createPlugin({
+  id: "quickstart"
+});
+const QuickstartDrawerProvider = quickstartPlugin.provide(
+  createComponentExtension({
+    name: "QuickstartDrawerProvider",
+    component: {
+      lazy: () => import('./components/QuickstartDrawerProvider.esm.js').then(
+        (m) => m.QuickstartDrawerProvider
+      )
+    }
+  })
+);
+
+export { QuickstartDrawerProvider, quickstartPlugin };
+//# 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":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createComponentExtension,\n  createPlugin,\n} from '@backstage/core-plugin-api';\nimport { PropsWithChildren } from 'react';\n\n/**\n * Quick start plugin\n *\n * @public\n */\nexport const quickstartPlugin = createPlugin({\n  id: 'quickstart',\n});\n\n/**\n * Quick start drawer provider\n *\n * @public\n */\nexport const QuickstartDrawerProvider: React.ComponentType<PropsWithChildren> =\n  quickstartPlugin.provide(\n    createComponentExtension({\n      name: 'QuickstartDrawerProvider',\n      component: {\n        lazy: () =>\n          import('./components/QuickstartDrawerProvider').then(\n            m => m.QuickstartDrawerProvider,\n          ),\n      },\n    }),\n  );\n"],"names":[],"mappings":";;AA2BO,MAAM,mBAAmB,YAAa,CAAA;AAAA,EAC3C,EAAI,EAAA;AACN,CAAC;AAOM,MAAM,2BACX,gBAAiB,CAAA,OAAA;AAAA,EACf,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,0BAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,8CAAuC,CAAE,CAAA,IAAA;AAAA,QAC9C,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;;;;"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@red-hat-developer-hub/backstage-plugin-quickstart",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/redhat-developer/rhdh-plugins",
+    "directory": "workspaces/quickstart/plugins/quickstart"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "quickstart",
+    "pluginPackages": [
+      "@red-hat-developer-hub/backstage-plugin-quickstart"
+    ]
+  },
+  "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/core-components": "^0.17.2",
+    "@backstage/core-plugin-api": "^1.10.7",
+    "@backstage/theme": "^0.6.6",
+    "@mui/icons-material": "5.17.1",
+    "@mui/material": "5.17.1",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.9.0",
+    "react-use": "^17.2.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.32.1",
+    "@backstage/core-app-api": "^1.17.0",
+    "@backstage/dev-utils": "^1.1.10",
+    "@backstage/test-utils": "^1.7.8",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "msw": "^1.0.0",
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "files": [
+    "dist",
+    "dist-scalprum",
+    "config.d.ts",
+    "app-config.dynamic.yaml"
+  ],
+  "configSchema": "config.d.ts",
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
+  "module": "./dist/index.esm.js"
+}