@verdaccio/ui-components 5.0.0-next-9.24 → 5.0.0-next-9.26

package/build/components/Help/Help.js

@@ -1,66 +1,310 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_CopyToClipBoard = require("../CopyClipboard/CopyToClipBoard.js");
+const require_cli_utils = require("../../utils/cli-utils.js");
 const require_AppConfigurationProvider = require("../../providers/AppConfigurationProvider/AppConfigurationProvider.js");
 const require_Heading = require("../Heading/Heading.js");
+const require_DocsLink = require("../DocsLink/DocsLink.js");
+require("../DocsLink/index.js");
+const require_markdown = require("../../utils/markdown.js");
 const require_styles = require("./styles.js");
 require("../../index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _mui_material_Box = require("@mui/material/Box");
+_mui_material_Box = require_runtime.__toESM(_mui_material_Box);
+let _mui_material_Alert = require("@mui/material/Alert");
+_mui_material_Alert = require_runtime.__toESM(_mui_material_Alert);
+let _mui_material_Link = require("@mui/material/Link");
+_mui_material_Link = require_runtime.__toESM(_mui_material_Link);
 let _mui_material_Typography = require("@mui/material/Typography");
 _mui_material_Typography = require_runtime.__toESM(_mui_material_Typography);
 let _mui_material_CardContent = require("@mui/material/CardContent");
 _mui_material_CardContent = require_runtime.__toESM(_mui_material_CardContent);
-let _mui_material_Button = require("@mui/material/Button");
-_mui_material_Button = require_runtime.__toESM(_mui_material_Button);
+let _mui_icons_material_Inventory2Outlined = require("@mui/icons-material/Inventory2Outlined");
+_mui_icons_material_Inventory2Outlined = require_runtime.__toESM(_mui_icons_material_Inventory2Outlined);
+let _mui_material_Tab = require("@mui/material/Tab");
+_mui_material_Tab = require_runtime.__toESM(_mui_material_Tab);
+let _mui_material_Tabs = require("@mui/material/Tabs");
+_mui_material_Tabs = require_runtime.__toESM(_mui_material_Tabs);
 let _mui_material_CardActions = require("@mui/material/CardActions");
 _mui_material_CardActions = require_runtime.__toESM(_mui_material_CardActions);
+let react_markdown = require("react-markdown");
+react_markdown = require_runtime.__toESM(react_markdown);
 //#region src/components/Help/Help.tsx
-function renderHeadingClipboardSegments(title, text) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
-		variant: "body1",
-		children: title
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopyToClipBoard.default, {
-		dataTestId: "segments",
-		text
-	})] });
+var NPMRC = ".npmrc";
+var SETUP_TABS = [
+	"npm",
+	"pnpm",
+	"yarn",
+	"bun",
+	NPMRC
+];
+var DOCS_UPLINKS_URL = "https://verdaccio.org/docs/uplinks";
+var YARN_PLUGIN_NPM_URL = "https://github.com/verdaccio/yarn-plugin-npm";
+var YARN_PLUGIN_INSTALL = "yarn dlx @verdaccio/yarn-import npm-login";
+/** The one-time command that makes a client use this registry, honouring `web.scope`. */
+function getSetupCommand(tab, scope, registryUrl) {
+	switch (tab) {
+		case "npm": return require_cli_utils.getCLISetConfigRegistry("npm config set", scope, registryUrl);
+		case "pnpm": return require_cli_utils.getCLISetConfigRegistry("pnpm config set", scope, registryUrl);
+		case "yarn": return require_cli_utils.getCLISBerryYamlRegistry(scope, registryUrl).trim();
+		case "bun": return require_cli_utils.getBunfigRegistry(scope, registryUrl);
+		default: return require_cli_utils.getNpmrcRegistry(scope, registryUrl);
+	}
 }
-var Help = () => {
+var Command = ({ dataTestId, text }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.CommandBox, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopyToClipBoard.default, {
+	dataTestId,
+	text,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: text })
+}) });
+var HelpStep = ({ index, title, description, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles.Step, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.StepNumber, {
+	"aria-hidden": true,
+	children: index
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+	sx: {
+		minWidth: 0,
+		flex: 1
+	},
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+			component: "h3",
+			sx: { fontWeight: 600 },
+			variant: "subtitle1",
+			children: title
+		}),
+		description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+			color: "text.secondary",
+			variant: "body2",
+			children: description
+		}),
+		children
+	]
+})] });
+/** The markdown that `web.help` sets, with `{{registryUrl}}` filled in. */
+var CustomHelp = ({ markdown }) => {
+	const { configOptions } = require_AppConfigurationProvider.useConfig();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.CustomHelpContent, {
+		"data-testid": "help-custom",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+			components: require_markdown.externalLinkComponents,
+			children: markdown.replaceAll("{{registryUrl}}", configOptions.base)
+		})
+	});
+};
+/** The steps to point a client at the registry, log in and publish; shared by the welcome card and the settings. */
+var HelpGuide = ({ withWaitStep = false, labelledBy }) => {
 	const { configOptions } = require_AppConfigurationProvider.useConfig();
+	const { t } = (0, react_i18next.useTranslation)();
 	const registryUrl = configOptions.base;
+	const scope = configOptions.scope || void 0;
+	const setupTabs = SETUP_TABS.filter((tab) => tab === NPMRC || configOptions.pkgManagers?.includes(tab));
+	const [setupTab, setSetupTab] = (0, react.useState)(setupTabs[0]);
+	const isBun = setupTab === "bun";
+	const steps = [{
+		key: "configure",
+		title: t("help.steps.configure.title"),
+		description: t("help.steps.configure.description"),
+		body: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tabs.default, {
+			allowScrollButtonsMobile: true,
+			"aria-label": t("help.steps.configure.title"),
+			onChange: (_event, value) => setSetupTab(value),
+			sx: {
+				minHeight: 36,
+				mt: 1
+			},
+			scrollButtons: "auto",
+			value: setupTab,
+			variant: "scrollable",
+			children: setupTabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tab.default, {
+				"data-testid": `help-setup-${tab}`,
+				label: tab,
+				sx: {
+					minHeight: 36,
+					minWidth: 0,
+					px: 1.5,
+					py: 0,
+					textTransform: "none"
+				},
+				value: tab
+			}, tab))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+			dataTestId: "help-setup-command",
+			text: getSetupCommand(setupTab, scope, registryUrl)
+		})] })
+	}];
+	if (configOptions.login) steps.push({
+		key: "login",
+		title: t("help.steps.login.title"),
+		description: t("help.steps.login.description"),
+		body: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+				dataTestId: "help-login-command",
+				text: t("help.first-step-command-line", { registryUrl })
+			}),
+			isBun && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+				color: "text.secondary",
+				sx: { mt: 1 },
+				variant: "body2",
+				children: t("help.steps.login.bun-note")
+			}),
+			setupTab === "yarn" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+				"data-testid": "help-login-yarn-plugin",
+				sx: { mt: 2 },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Typography.default, {
+						color: "text.secondary",
+						variant: "body2",
+						children: [
+							t("help.steps.login.yarn-note"),
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Link.default, {
+								href: YARN_PLUGIN_NPM_URL,
+								rel: "noopener noreferrer",
+								target: "_blank",
+								children: t("help.steps.login.yarn-plugin-link")
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+						dataTestId: "help-login-yarn-plugin-install",
+						text: YARN_PLUGIN_INSTALL
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+						dataTestId: "help-login-yarn-command",
+						text: require_cli_utils.getCLISetRegistry("yarn npm login", registryUrl)
+					})
+				]
+			})
+		] })
+	});
+	steps.push({
+		key: "publish",
+		title: t("help.steps.publish.title"),
+		description: t("help.steps.publish.description"),
+		body: isBun ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+			dataTestId: "help-publish-command-bun",
+			text: require_cli_utils.getCLISetRegistry("bun publish", registryUrl)
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+			dataTestId: "help-publish-command",
+			text: t("help.second-step-command-line", { registryUrl })
+		})
+	});
+	if (withWaitStep) steps.push({
+		key: "wait",
+		title: t("help.steps.wait.title"),
+		description: t("help.steps.wait.description")
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.StepList, {
+		"aria-labelledby": labelledBy,
+		"data-testid": "help-guide",
+		children: steps.map((step, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpStep, {
+			description: step.description,
+			index: index + 1,
+			title: step.title,
+			children: step.body
+		}, step.key))
+	});
+};
+var Help = () => {
+	const { configOptions } = require_AppConfigurationProvider.useConfig();
 	const { t } = (0, react_i18next.useTranslation)();
+	const customHelp = configOptions.help?.trim();
+	if (customHelp) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.CardStyled, {
+		"data-testid": "help-card",
+		id: "help-card",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_CardContent.default, {
+			sx: { p: {
+				xs: 2,
+				sm: 4
+			} },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomHelp, { markdown: customHelp })
+		})
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles.CardStyled, {
 		"data-testid": "help-card",
 		id: "help-card",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_CardContent.default, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Heading.default, {
-				gutterBottom: true,
-				id: "help-card__title",
-				variant: "h5",
-				children: t("help.title")
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Heading.default, {
-				color: "textSecondary",
-				gutterBottom: true,
-				sx: { marginBottom: 1 },
-				children: t("help.sub-title")
-			}),
-			renderHeadingClipboardSegments(t("help.first-step"), t("help.first-step-command-line", { registryUrl })),
-			renderHeadingClipboardSegments(t("help.second-step"), t("help.second-step-command-line", { registryUrl })),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
-				variant: "body1",
-				children: t("help.third-step")
-			})
-		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_CardActions.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
-			color: "primary",
-			href: "https://verdaccio.org/docs/cli-registry",
-			size: "small",
-			children: t("button.learn-more")
-		}) })]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_CardContent.default, {
+			sx: { p: {
+				xs: 2,
+				sm: 4
+			} },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+					sx: {
+						display: "flex",
+						alignItems: {
+							xs: "flex-start",
+							sm: "center"
+						},
+						gap: 2,
+						mb: 3
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_Inventory2Outlined.default, {
+						color: "primary",
+						sx: {
+							fontSize: {
+								xs: 32,
+								sm: 48
+							},
+							flexShrink: 0
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
+						sx: { minWidth: 0 },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Heading.default, {
+							id: "help-card__title",
+							sx: {
+								fontSize: {
+									xs: "1.25rem",
+									sm: "1.5rem"
+								},
+								lineHeight: 1.3
+							},
+							variant: "h5",
+							children: t("help.title")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+							color: "text.secondary",
+							children: t("help.welcome", { title: configOptions.title })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpGuide, {
+					labelledBy: "help-card__title",
+					withWaitStep: true
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Alert.default, {
+					"data-testid": "help-uplinks-note",
+					severity: "info",
+					sx: { mt: 3 },
+					children: [
+						t("help.uplinks-note"),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Link.default, {
+							href: DOCS_UPLINKS_URL,
+							rel: "noopener noreferrer",
+							target: "_blank",
+							children: t("help.uplinks-link")
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_CardActions.default, {
+			sx: {
+				px: {
+					xs: 2,
+					sm: 4
+				},
+				pb: 3
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DocsLink.default, { dataTestId: "help-docs-link" })
+		})]
 	});
 };
 //#endregion
+exports.CustomHelp = CustomHelp;
+exports.HelpGuide = HelpGuide;
 exports.default = Help;
+exports.getSetupCommand = getSetupCommand;
 
 //# sourceMappingURL=Help.js.map

package/build/components/Help/Help.js.map

@@ -1 +1 @@
-{"version":3,"file":"Help.js","names":["Fragment","Typography","CopyClipboard","useConfig","useTranslation","Card","CardContent","Heading","CardActions","Button"],"sources":["../../../src/components/Help/Help.tsx"],"sourcesContent":["import Button from '@mui/material/Button';\nimport CardActions from '@mui/material/CardActions';\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport React, { Fragment } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { CopyClipboard, Heading, useConfig } from '../../';\nimport { CardStyled as Card } from './styles';\n\nfunction renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {\n  return (\n    <Fragment>\n      <Typography variant={'body1'}>{title}</Typography>\n      <CopyClipboard dataTestId=\"segments\" text={text} />\n    </Fragment>\n  );\n}\n\nconst Help: React.FC = () => {\n  const { configOptions } = useConfig();\n  const registryUrl = configOptions.base;\n  const { t } = useTranslation();\n\n  return (\n    <Card data-testid=\"help-card\" id=\"help-card\">\n      <CardContent>\n        <Heading gutterBottom={true} id=\"help-card__title\" variant=\"h5\">\n          {t('help.title')}\n        </Heading>\n        <Heading color=\"textSecondary\" gutterBottom={true} sx={{ marginBottom: 1 }}>\n          {t('help.sub-title')}\n        </Heading>\n        {renderHeadingClipboardSegments(\n          t('help.first-step'),\n          t('help.first-step-command-line', { registryUrl })\n        )}\n        {renderHeadingClipboardSegments(\n          t('help.second-step'),\n          t('help.second-step-command-line', { registryUrl })\n        )}\n        <Typography variant=\"body1\">{t('help.third-step')}</Typography>\n      </CardContent>\n      <CardActions>\n        <Button color=\"primary\" href=\"https://verdaccio.org/docs/cli-registry\" size=\"small\">\n          {t('button.learn-more')}\n        </Button>\n      </CardActions>\n    </Card>\n  );\n};\n\nexport default Help;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,SAAS,+BAA+B,OAAe,MAA+B;CACpF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,MAAAA,UAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,SAAD;EAAY,SAAS;EAAU,UAAA;CAAkB,CAAA,GACjD,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,SAAD;EAAe,YAAW;EAAiB;CAAO,CAAA,CAC1C,EAAA,CAAA;AAEd;AAEA,IAAM,aAAuB;CAC3B,MAAM,EAAE,kBAAkBC,iCAAAA,UAAU;CACpC,MAAM,cAAc,cAAc;CAClC,MAAM,EAAE,OAAA,GAAMC,cAAAA,eAAAA,CAAe;CAE7B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,eAAAA,YAAD;EAAM,eAAY;EAAY,IAAG;EAAjC,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,0BAAAA,SAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,SAAD;IAAS,cAAc;IAAM,IAAG;IAAmB,SAAQ;IACxD,UAAA,EAAE,YAAY;GACR,CAAA;GACT,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,SAAD;IAAS,OAAM;IAAgB,cAAc;IAAM,IAAI,EAAE,cAAc,EAAE;IACtE,UAAA,EAAE,gBAAgB;GACZ,CAAA;GACR,+BACC,EAAE,iBAAiB,GACnB,EAAE,gCAAgC,EAAE,YAAY,CAAC,CACnD;GACC,+BACC,EAAE,kBAAkB,GACpB,EAAE,iCAAiC,EAAE,YAAY,CAAC,CACpD;GACA,iBAAA,GAAA,kBAAA,IAAA,CAACN,yBAAAA,SAAD;IAAY,SAAQ;IAAS,UAAA,EAAE,iBAAiB;GAAc,CAAA;EACnD,EAAA,CAAA,GACb,iBAAA,GAAA,kBAAA,IAAA,CAACO,0BAAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,SAAD;GAAQ,OAAM;GAAU,MAAK;GAA0C,MAAK;GACzE,UAAA,EAAE,mBAAmB;EAChB,CAAA,EACG,CAAA,CACT;;AAEV"}
+{"version":3,"file":"Help.js","names":["getCLISetConfigRegistry","getCLISBerryYamlRegistry","getBunfigRegistry","getNpmrcRegistry","CommandBox","CopyClipboard","Step","StepNumber","Box","Typography","useConfig","CustomHelpContent","ReactMarkdown","externalLinkComponents","useTranslation","useState","_Fragment","Tabs","Tab","Link","getCLISetRegistry","StepList","Card","CardContent","Inventory2Outlined","Heading","Alert","CardActions","DocsLink"],"sources":["../../../src/components/Help/Help.tsx"],"sourcesContent":["import Inventory2Outlined from '@mui/icons-material/Inventory2Outlined';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport CardActions from '@mui/material/CardActions';\nimport CardContent from '@mui/material/CardContent';\nimport Link from '@mui/material/Link';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport Typography from '@mui/material/Typography';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport { CopyClipboard, Heading, useConfig } from '../../';\nimport DocsLink from '../DocsLink';\nimport {\n  getBunfigRegistry,\n  getCLISBerryYamlRegistry,\n  getCLISetConfigRegistry,\n  getCLISetRegistry,\n  getNpmrcRegistry,\n} from '../../utils/cli-utils';\nimport { externalLinkComponents } from '../../utils/markdown';\nimport {\n  CardStyled as Card,\n  CommandBox,\n  CustomHelpContent,\n  Step,\n  StepList,\n  StepNumber,\n} from './styles';\n\nconst NPMRC = '.npmrc';\nconst SETUP_TABS = ['npm', 'pnpm', 'yarn', 'bun', NPMRC] as const;\ntype SetupTab = (typeof SETUP_TABS)[number];\n\nconst DOCS_UPLINKS_URL = 'https://verdaccio.org/docs/uplinks';\nconst YARN_PLUGIN_NPM_URL = 'https://github.com/verdaccio/yarn-plugin-npm';\nconst YARN_PLUGIN_INSTALL = 'yarn dlx @verdaccio/yarn-import npm-login';\n\n/** The one-time command that makes a client use this registry, honouring `web.scope`. */\nexport function getSetupCommand(tab: SetupTab, scope: string | undefined, registryUrl: string) {\n  switch (tab) {\n    case 'npm':\n      return getCLISetConfigRegistry('npm config set', scope, registryUrl);\n    case 'pnpm':\n      return getCLISetConfigRegistry('pnpm config set', scope, registryUrl);\n    case 'yarn':\n      return getCLISBerryYamlRegistry(scope, registryUrl).trim();\n    case 'bun':\n      return getBunfigRegistry(scope, registryUrl);\n    default:\n      return getNpmrcRegistry(scope, registryUrl);\n  }\n}\n\nconst Command: React.FC<{ dataTestId: string; text: string }> = ({ dataTestId, text }) => (\n  <CommandBox>\n    <CopyClipboard dataTestId={dataTestId} text={text}>\n      <code>{text}</code>\n    </CopyClipboard>\n  </CommandBox>\n);\n\nconst HelpStep: React.FC<{\n  index: number;\n  title: string;\n  description?: string;\n  children?: React.ReactNode;\n}> = ({ index, title, description, children }) => (\n  <Step>\n    <StepNumber aria-hidden={true}>{index}</StepNumber>\n    <Box sx={{ minWidth: 0, flex: 1 }}>\n      <Typography component=\"h3\" sx={{ fontWeight: 600 }} variant=\"subtitle1\">\n        {title}\n      </Typography>\n      {description && (\n        <Typography color=\"text.secondary\" variant=\"body2\">\n          {description}\n        </Typography>\n      )}\n      {children}\n    </Box>\n  </Step>\n);\n\n/** The markdown that `web.help` sets, with `{{registryUrl}}` filled in. */\nexport const CustomHelp: React.FC<{ markdown: string }> = ({ markdown }) => {\n  const { configOptions } = useConfig();\n  return (\n    <CustomHelpContent data-testid=\"help-custom\">\n      <ReactMarkdown components={externalLinkComponents}>\n        {markdown.replaceAll('{{registryUrl}}', configOptions.base)}\n      </ReactMarkdown>\n    </CustomHelpContent>\n  );\n};\n\n/** The steps to point a client at the registry, log in and publish; shared by the welcome card and the settings. */\nexport const HelpGuide: React.FC<{ withWaitStep?: boolean; labelledBy?: string }> = ({\n  withWaitStep = false,\n  labelledBy,\n}) => {\n  const { configOptions } = useConfig();\n  const { t } = useTranslation();\n  const registryUrl = configOptions.base;\n  const scope = configOptions.scope || undefined;\n  const setupTabs = SETUP_TABS.filter(\n    (tab) => tab === NPMRC || configOptions.pkgManagers?.includes(tab)\n  );\n  const [setupTab, setSetupTab] = useState<SetupTab>(setupTabs[0]);\n  const isBun = setupTab === 'bun';\n  const steps: { key: string; title: string; description?: string; body?: React.ReactNode }[] = [\n    {\n      key: 'configure',\n      title: t('help.steps.configure.title'),\n      description: t('help.steps.configure.description'),\n      body: (\n        <>\n          <Tabs\n            allowScrollButtonsMobile={true}\n            aria-label={t('help.steps.configure.title')}\n            onChange={(_event, value: SetupTab) => setSetupTab(value)}\n            sx={{ minHeight: 36, mt: 1 }}\n            scrollButtons=\"auto\"\n            value={setupTab}\n            variant=\"scrollable\"\n          >\n            {setupTabs.map((tab) => (\n              <Tab\n                data-testid={`help-setup-${tab}`}\n                key={tab}\n                label={tab}\n                sx={{ minHeight: 36, minWidth: 0, px: 1.5, py: 0, textTransform: 'none' }}\n                value={tab}\n              />\n            ))}\n          </Tabs>\n          <Command\n            dataTestId=\"help-setup-command\"\n            text={getSetupCommand(setupTab, scope, registryUrl)}\n          />\n        </>\n      ),\n    },\n  ];\n  if (configOptions.login) {\n    steps.push({\n      key: 'login',\n      title: t('help.steps.login.title'),\n      description: t('help.steps.login.description'),\n      body: (\n        <>\n          <Command\n            dataTestId=\"help-login-command\"\n            text={t('help.first-step-command-line', { registryUrl })}\n          />\n          {isBun && (\n            <Typography color=\"text.secondary\" sx={{ mt: 1 }} variant=\"body2\">\n              {t('help.steps.login.bun-note')}\n            </Typography>\n          )}\n          {setupTab === 'yarn' && (\n            <Box data-testid=\"help-login-yarn-plugin\" sx={{ mt: 2 }}>\n              <Typography color=\"text.secondary\" variant=\"body2\">\n                {t('help.steps.login.yarn-note')}{' '}\n                <Link href={YARN_PLUGIN_NPM_URL} rel=\"noopener noreferrer\" target=\"_blank\">\n                  {t('help.steps.login.yarn-plugin-link')}\n                </Link>\n              </Typography>\n              <Command dataTestId=\"help-login-yarn-plugin-install\" text={YARN_PLUGIN_INSTALL} />\n              <Command\n                dataTestId=\"help-login-yarn-command\"\n                text={getCLISetRegistry('yarn npm login', registryUrl)}\n              />\n            </Box>\n          )}\n        </>\n      ),\n    });\n  }\n  steps.push({\n    key: 'publish',\n    title: t('help.steps.publish.title'),\n    description: t('help.steps.publish.description'),\n    body: isBun ? (\n      <Command\n        dataTestId=\"help-publish-command-bun\"\n        text={getCLISetRegistry('bun publish', registryUrl)}\n      />\n    ) : (\n      <Command\n        dataTestId=\"help-publish-command\"\n        text={t('help.second-step-command-line', { registryUrl })}\n      />\n    ),\n  });\n  if (withWaitStep) {\n    steps.push({\n      key: 'wait',\n      title: t('help.steps.wait.title'),\n      description: t('help.steps.wait.description'),\n    });\n  }\n\n  return (\n    <StepList aria-labelledby={labelledBy} data-testid=\"help-guide\">\n      {steps.map((step, index) => (\n        <HelpStep\n          description={step.description}\n          index={index + 1}\n          key={step.key}\n          title={step.title}\n        >\n          {step.body}\n        </HelpStep>\n      ))}\n    </StepList>\n  );\n};\n\nconst Help: React.FC = () => {\n  const { configOptions } = useConfig();\n  const { t } = useTranslation();\n  const customHelp = configOptions.help?.trim();\n  if (customHelp) {\n    return (\n      <Card data-testid=\"help-card\" id=\"help-card\">\n        <CardContent sx={{ p: { xs: 2, sm: 4 } }}>\n          <CustomHelp markdown={customHelp} />\n        </CardContent>\n      </Card>\n    );\n  }\n  return (\n    <Card data-testid=\"help-card\" id=\"help-card\">\n      <CardContent sx={{ p: { xs: 2, sm: 4 } }}>\n        <Box\n          sx={{ display: 'flex', alignItems: { xs: 'flex-start', sm: 'center' }, gap: 2, mb: 3 }}\n        >\n          <Inventory2Outlined\n            color=\"primary\"\n            sx={{ fontSize: { xs: 32, sm: 48 }, flexShrink: 0 }}\n          />\n          <Box sx={{ minWidth: 0 }}>\n            <Heading\n              id=\"help-card__title\"\n              sx={{ fontSize: { xs: '1.25rem', sm: '1.5rem' }, lineHeight: 1.3 }}\n              variant=\"h5\"\n            >\n              {t('help.title')}\n            </Heading>\n            <Typography color=\"text.secondary\">\n              {t('help.welcome', { title: configOptions.title })}\n            </Typography>\n          </Box>\n        </Box>\n        <HelpGuide labelledBy=\"help-card__title\" withWaitStep={true} />\n        {/* @ts-ignore - Alert does accept children despite the type error */}\n        <Alert data-testid=\"help-uplinks-note\" severity=\"info\" sx={{ mt: 3 }}>\n          {t('help.uplinks-note')}{' '}\n          <Link href={DOCS_UPLINKS_URL} rel=\"noopener noreferrer\" target=\"_blank\">\n            {t('help.uplinks-link')}\n          </Link>\n        </Alert>\n      </CardContent>\n      <CardActions sx={{ px: { xs: 2, sm: 4 }, pb: 3 }}>\n        <DocsLink dataTestId=\"help-docs-link\" />\n      </CardActions>\n    </Card>\n  );\n};\n\nexport default Help;\n"],"mappings":"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"}