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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @red-hat-developer-hub/backstage-plugin-quickstart
 
+## 1.1.1
+
+### Patch Changes
+
+- 0c449b8: Fix to set quickstart-open local-storage key to true on first user visit.
+
+## 1.1.0
+
+### Minor Changes
+
+- 7eb9524: - Add QuickstartButton to use context and remove localstorage logic for opening/closing of drawer.
+  - Add a custom class `.quickstart-drawer-open` on document.body that can be used to adjust styles across the app.
+  - Update QuickstartDrawer styles to handle header height.
+
 ## 1.0.0
 
 ### Major Changes

package/app-config.dynamic.yaml

@@ -4,3 +4,7 @@ dynamicPlugins:
       mountPoints:
         - mountPoint: application/provider
           importName: QuickstartDrawerProvider
+        - mountPoint: global.header/help
+          importName: QuickstartButton
+          config:
+            priority: 100

package/dist/components/Quickstart.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Box from '@mui/material/Box';
 import { QuickstartHeader } from './QuickstartHeader.esm.js';
 import Divider from '@mui/material/Divider';
@@ -26,38 +26,50 @@ const Quickstart = ({
     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
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              flex: 1,
+              padding: (theme) => theme.spacing(3),
+              overflowY: "auto"
+            },
+            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 };

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

@@ -1 +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;;;;"}
+{"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    <Box\n      sx={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Box\n        sx={{\n          flex: 1,\n          padding: theme => theme.spacing(3),\n          overflowY: 'auto',\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    </Box>\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,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,IAAM,EAAA,CAAA;AAAA,cACN,OAAS,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,cACjC,SAAW,EAAA;AAAA,aACb;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,CAAA;AAAA,kCACjB,OAAQ,EAAA,EAAA,CAAA;AAAA,8BACT,GAAA;AAAA,gBAAC,iBAAA;AAAA,gBAAA;AAAA,kBACC,eAAA;AAAA,kBACA,SAAA;AAAA,kBACA,aAAa,MAAM;AACjB,oBAAA,MAAM,cAAc,iBAAkB,EAAA;AACtC,oBAAA,WAAA,CAAY,WAAW,CAAA;AAAA;AACzB;AAAA;AACF;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,iBAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/QuickstartButton/QuickstartButton.esm.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import WavingHandIcon from '@mui/icons-material/WavingHandOutlined';
+import { useQuickstartPermission } from '../../hooks/useQuickstartPermission.esm.js';
+import { useQuickstartDrawerContext } from '../../hooks/useQuickstartDrawerContext.esm.js';
+
+const QuickstartButton = ({
+  title = "Quick start",
+  style,
+  onClick = () => {
+  }
+}) => {
+  const isAllowed = useQuickstartPermission();
+  const { toggleDrawer } = useQuickstartDrawerContext();
+  const theme = useTheme();
+  const handleClick = useCallback(() => {
+    toggleDrawer();
+    onClick();
+  }, [toggleDrawer, onClick]);
+  return isAllowed ? /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      sx: {
+        width: "100%",
+        color: "inherit",
+        ...style
+      },
+      "data-testid": "quickstart-button",
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            margin: "8px 0",
+            color: "inherit",
+            width: "100%"
+          },
+          children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(
+              WavingHandIcon,
+              {
+                sx: {
+                  fontSize: 20,
+                  marginRight: "0.5rem",
+                  flexShrink: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  color: theme.palette.mode === "dark" ? theme.palette.text.primary : theme.palette.text.disabled
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: theme.palette.text.primary, children: title })
+              }
+            )
+          ] })
+        }
+      )
+    }
+  ) : null;
+};
+
+export { QuickstartButton };
+//# sourceMappingURL=QuickstartButton.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartButton.esm.js","sources":["../../../src/components/QuickstartButton/QuickstartButton.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 { CSSProperties, useCallback } from 'react';\nimport MenuItem from '@mui/material/MenuItem';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\nimport WavingHandIcon from '@mui/icons-material/WavingHandOutlined';\nimport { useQuickstartPermission } from '../../hooks/useQuickstartPermission';\nimport { useQuickstartDrawerContext } from '../../hooks/useQuickstartDrawerContext';\n\n/**\n * Props for the QuickstartButton component\n * @public\n */\nexport interface QuickstartButtonProps {\n  /**\n   * The title text to display in the button\n   * @defaultValue 'Quick start'\n   */\n  title?: string;\n  /**\n   * Custom CSS styles to apply to the button\n   */\n  style?: CSSProperties;\n  /**\n   * Optional callback function to execute when the button is clicked\n   */\n  onClick?: () => void;\n}\n\n/**\n * @public\n */\nexport const QuickstartButton = ({\n  title = 'Quick start',\n  style,\n  onClick = () => {},\n}: QuickstartButtonProps) => {\n  const isAllowed = useQuickstartPermission();\n  const { toggleDrawer } = useQuickstartDrawerContext();\n  const theme = useTheme();\n\n  const handleClick = useCallback(() => {\n    toggleDrawer();\n    onClick();\n  }, [toggleDrawer, onClick]);\n\n  return isAllowed ? (\n    <MenuItem\n      sx={{\n        width: '100%',\n        color: 'inherit',\n        ...style,\n      }}\n      data-testid=\"quickstart-button\"\n      onClick={handleClick}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          margin: '8px 0',\n          color: 'inherit',\n          width: '100%',\n        }}\n      >\n        <Box sx={{ display: 'flex', alignItems: 'center' }}>\n          <WavingHandIcon\n            sx={{\n              fontSize: 20,\n              marginRight: '0.5rem',\n              flexShrink: 0,\n              display: 'flex',\n              alignItems: 'center',\n              color:\n                theme.palette.mode === 'dark'\n                  ? theme.palette.text.primary\n                  : theme.palette.text.disabled,\n            }}\n          />\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              justifyContent: 'center',\n            }}\n          >\n            <Typography variant=\"body2\" color={theme.palette.text.primary}>\n              {title}\n            </Typography>\n          </Box>\n        </Box>\n      </Box>\n    </MenuItem>\n  ) : null;\n};\n"],"names":[],"mappings":";;;;;;;;;;AAgDO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,KAAQ,GAAA,aAAA;AAAA,EACR,KAAA;AAAA,EACA,UAAU,MAAM;AAAA;AAClB,CAA6B,KAAA;AAC3B,EAAA,MAAM,YAAY,uBAAwB,EAAA;AAC1C,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,0BAA2B,EAAA;AACpD,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAa,YAAA,EAAA;AACb,IAAQ,OAAA,EAAA;AAAA,GACP,EAAA,CAAC,YAAc,EAAA,OAAO,CAAC,CAAA;AAE1B,EAAA,OAAO,SACL,mBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,KAAO,EAAA,MAAA;AAAA,QACP,KAAO,EAAA,SAAA;AAAA,QACP,GAAG;AAAA,OACL;AAAA,MACA,aAAY,EAAA,mBAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MAET,QAAA,kBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,OAAS,EAAA,MAAA;AAAA,YACT,UAAY,EAAA,QAAA;AAAA,YACZ,cAAgB,EAAA,eAAA;AAAA,YAChB,MAAQ,EAAA,OAAA;AAAA,YACR,KAAO,EAAA,SAAA;AAAA,YACP,KAAO,EAAA;AAAA,WACT;AAAA,UAEA,QAAA,kBAAA,IAAA,CAAC,OAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,UACtC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,QAAU,EAAA,EAAA;AAAA,kBACV,WAAa,EAAA,QAAA;AAAA,kBACb,UAAY,EAAA,CAAA;AAAA,kBACZ,OAAS,EAAA,MAAA;AAAA,kBACT,UAAY,EAAA,QAAA;AAAA,kBACZ,KAAA,EACE,KAAM,CAAA,OAAA,CAAQ,IAAS,KAAA,MAAA,GACnB,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA,GACnB,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAC3B;AAAA,aACF;AAAA,4BACA,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,OAAS,EAAA,MAAA;AAAA,kBACT,aAAe,EAAA,QAAA;AAAA,kBACf,cAAgB,EAAA;AAAA,iBAClB;AAAA,gBAEA,QAAA,kBAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,OAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA,EACnD,QACH,EAAA,KAAA,EAAA;AAAA;AAAA;AACF,WACF,EAAA;AAAA;AAAA;AACF;AAAA,GAEA,GAAA,IAAA;AACN;;;;"}

package/dist/components/QuickstartDrawer.esm.js

@@ -18,6 +18,13 @@ const QuickstartDrawer = () => {
           boxSizing: "border-box",
           backgroundColor: (theme) => `${theme.palette?.rhdh?.general.sidebarBackgroundColor}`,
           justifyContent: "space-between"
+        },
+        // Only apply header offset when global header exists
+        "body:has(#global-header) &": {
+          "& .v5-MuiDrawer-paper": {
+            top: "64px !important",
+            height: "calc(100vh - 64px) !important"
+          }
         }
       },
       variant: "persistent",

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

@@ -1 +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;;;;"}
+{"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        // Only apply header offset when global header exists\n        'body:has(#global-header) &': {\n          '& .v5-MuiDrawer-paper': {\n            top: '64px !important',\n            height: 'calc(100vh - 64px) !important',\n          },\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,SAClB;AAAA;AAAA,QAEA,4BAA8B,EAAA;AAAA,UAC5B,uBAAyB,EAAA;AAAA,YACvB,GAAK,EAAA,iBAAA;AAAA,YACL,MAAQ,EAAA;AAAA;AACV;AACF,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/QuickstartDrawerProvider.esm.js

@@ -5,21 +5,32 @@ 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 [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [showNotification, setShowNotification] = useState(false);
   const [hasShownNotification, setHasShownNotification] = useState(false);
   const [drawerWidth, setDrawerWidth] = useState(500);
   useEffect(() => {
+    if (isDrawerOpen) {
+      document.body.classList.add("quickstart-drawer-open");
+      document.body.style.setProperty(
+        "--quickstart-drawer-width",
+        `${drawerWidth}px`
+      );
+    } else {
+      document.body.classList.remove("quickstart-drawer-open");
+      document.body.style.removeProperty("--quickstart-drawer-width");
+    }
+    return () => {
+      document.body.classList.remove("quickstart-drawer-open");
+      document.body.style.removeProperty("--quickstart-drawer-width");
+    };
+  }, [isDrawerOpen, drawerWidth]);
+  useEffect(() => {
+    const wasOpen = localStorage.getItem("quickstart-open");
     const hasVisited = localStorage.getItem("quickstart-visited");
     const notificationShown = localStorage.getItem(
       "quickstart-notification-shown"
@@ -28,11 +39,17 @@ const QuickstartDrawerProvider = ({ children }) => {
       if (!hasVisited) {
         setIsDrawerOpen(true);
         localStorage.setItem("quickstart-visited", "true");
+        localStorage.setItem("quickstart-open", "true");
+      } else if (wasOpen === "true") {
+        setIsDrawerOpen(true);
       }
     }
     setHasShownNotification(notificationShown === "true");
-  }, [isAllowed, setIsDrawerOpen]);
-  const openDrawer = () => setIsDrawerOpen(true);
+  }, [isAllowed]);
+  const openDrawer = () => {
+    setIsDrawerOpen(true);
+    localStorage.setItem("quickstart-open", "true");
+  };
   const closeDrawer = () => {
     setIsDrawerOpen(false);
     if (!hasShownNotification) {
@@ -40,8 +57,12 @@ const QuickstartDrawerProvider = ({ children }) => {
       setHasShownNotification(true);
       localStorage.setItem("quickstart-notification-shown", "true");
     }
+    localStorage.setItem("quickstart-open", "false");
+  };
+  const toggleDrawer = () => {
+    setIsDrawerOpen(!isDrawerOpen);
+    localStorage.setItem("quickstart-open", (!isDrawerOpen).toString());
   };
-  const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
   const handleNotificationClose = () => setShowNotification(false);
   return /* @__PURE__ */ jsxs(
     QuickstartDrawerContext.Provider,
@@ -55,15 +76,7 @@ const QuickstartDrawerProvider = ({ children }) => {
         drawerWidth
       },
       children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              ...!isDrawerOpen ? { marginRight: "0px" } : { marginRight: `${drawerWidth}px` }
-            },
-            children
-          }
-        ),
+        children,
         /* @__PURE__ */ jsx(QuickstartDrawer, {}),
         /* @__PURE__ */ jsx(
           Snackbar,

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

@@ -1 +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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"}
+{"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 { useQuickstartPermission } from '../hooks/useQuickstartPermission';\n\nexport const QuickstartDrawerProvider = ({ children }: PropsWithChildren) => {\n  const isAllowed = useQuickstartPermission();\n  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);\n  const [showNotification, setShowNotification] = useState(false);\n  const [hasShownNotification, setHasShownNotification] = useState(false);\n  const [drawerWidth, setDrawerWidth] = useState<number>(500);\n\n  // Single useEffect - sets class on document.body\n  useEffect(() => {\n    if (isDrawerOpen) {\n      document.body.classList.add('quickstart-drawer-open');\n      document.body.style.setProperty(\n        '--quickstart-drawer-width',\n        `${drawerWidth}px`,\n      );\n    } else {\n      document.body.classList.remove('quickstart-drawer-open');\n      document.body.style.removeProperty('--quickstart-drawer-width');\n    }\n\n    return () => {\n      document.body.classList.remove('quickstart-drawer-open');\n      document.body.style.removeProperty('--quickstart-drawer-width');\n    };\n  }, [isDrawerOpen, drawerWidth]);\n\n  useEffect(() => {\n    const wasOpen = localStorage.getItem('quickstart-open');\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        localStorage.setItem('quickstart-open', 'true');\n      } else if (wasOpen === 'true') {\n        setIsDrawerOpen(true);\n      }\n    }\n\n    setHasShownNotification(notificationShown === 'true');\n  }, [isAllowed]);\n\n  const openDrawer = () => {\n    setIsDrawerOpen(true);\n    localStorage.setItem('quickstart-open', 'true');\n  };\n\n  const closeDrawer = () => {\n    setIsDrawerOpen(false);\n    if (!hasShownNotification) {\n      setShowNotification(true);\n      setHasShownNotification(true);\n      localStorage.setItem('quickstart-notification-shown', 'true');\n    }\n    localStorage.setItem('quickstart-open', 'false');\n  };\n\n  const toggleDrawer = () => {\n    setIsDrawerOpen(!isDrawerOpen);\n    localStorage.setItem('quickstart-open', (!isDrawerOpen).toString());\n  };\n\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      {children}\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/index.d.ts

@@ -1,6 +1,26 @@
 /// <reference types="react" />
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
-import { PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren } from 'react';
+
+/**
+ * Props for the QuickstartButton component
+ * @public
+ */
+interface QuickstartButtonProps {
+    /**
+     * The title text to display in the button
+     * @defaultValue 'Quick start'
+     */
+    title?: string;
+    /**
+     * Custom CSS styles to apply to the button
+     */
+    style?: CSSProperties;
+    /**
+     * Optional callback function to execute when the button is clicked
+     */
+    onClick?: () => void;
+}
 
 /**
  * Quick start plugin
@@ -14,6 +34,12 @@ declare const quickstartPlugin: _backstage_core_plugin_api.BackstagePlugin<{}, {
  * @public
  */
 declare const QuickstartDrawerProvider: React.ComponentType<PropsWithChildren>;
+/**
+ * Quick start button for global header help dropdown
+ *
+ * @public
+ */
+declare const QuickstartButton: React.ComponentType<QuickstartButtonProps>;
 
 /**
  * Type for QuickstartDrawerContext
@@ -54,5 +80,5 @@ interface QuickstartDrawerContextType {
  */
 declare const useQuickstartDrawerContext: () => QuickstartDrawerContextType;
 
-export { QuickstartDrawerProvider, quickstartPlugin, useQuickstartDrawerContext };
-export type { QuickstartDrawerContextType };
+export { QuickstartButton, QuickstartDrawerProvider, quickstartPlugin, useQuickstartDrawerContext };
+export type { QuickstartButtonProps, QuickstartDrawerContextType };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { unstable_ClassNameGenerator } from '@mui/material/className';
-export { QuickstartDrawerProvider, quickstartPlugin } from './plugin.esm.js';
+export { QuickstartButton, QuickstartDrawerProvider, quickstartPlugin } from './plugin.esm.js';
 export { useQuickstartDrawerContext } from './hooks/useQuickstartDrawerContext.esm.js';
 
 unstable_ClassNameGenerator.configure((componentName) => {

package/dist/index.esm.js.map

@@ -1 +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"}
+{"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 * from './plugin';\n\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

@@ -13,6 +13,16 @@ const QuickstartDrawerProvider = quickstartPlugin.provide(
     }
   })
 );
+const QuickstartButton = quickstartPlugin.provide(
+  createComponentExtension({
+    name: "QuickstartButton",
+    component: {
+      lazy: () => import('./components/QuickstartButton/QuickstartButton.esm.js').then(
+        (m) => m.QuickstartButton
+      )
+    }
+  })
+);
 
-export { QuickstartDrawerProvider, quickstartPlugin };
+export { QuickstartButton, QuickstartDrawerProvider, quickstartPlugin };
 //# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -1 +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;;;;"}
+{"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';\nimport { QuickstartButtonProps } from './components/QuickstartButton/QuickstartButton';\n\nexport type { QuickstartButtonProps } from './components/QuickstartButton/QuickstartButton';\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\n/**\n * Quick start button for global header help dropdown\n *\n * @public\n */\nexport const QuickstartButton: React.ComponentType<QuickstartButtonProps> =\n  quickstartPlugin.provide(\n    createComponentExtension({\n      name: 'QuickstartButton',\n      component: {\n        lazy: () =>\n          import('./components/QuickstartButton/QuickstartButton').then(\n            m => m.QuickstartButton,\n          ),\n      },\n    }),\n  );\n"],"names":[],"mappings":";;AA8BO,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;AAOK,MAAM,mBACX,gBAAiB,CAAA,OAAA;AAAA,EACf,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,kBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,uDAAgD,CAAE,CAAA,IAAA;AAAA,QACvD,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-quickstart",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "license": "Apache-2.0",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/dist/hooks/useLocalStorageState.esm.js

@@ -1,28 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;;;;"}