@verdaccio/ui-components 5.0.0-next-9.23 → 5.0.0-next-9.25

package/build/components/Help/Help.js

@@ -1,66 +1,273 @@
 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";
+/** 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 hasBun = configOptions.pkgManagers?.includes("bun");
+	const [setupTab, setSetupTab] = (0, react.useState)(setupTabs[0]);
+	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 })
+		}), hasBun && /* @__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")
+		})] })
+	});
+	steps.push({
+		key: "publish",
+		title: t("help.steps.publish.title"),
+		description: t("help.steps.publish.description"),
+		body: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+			dataTestId: "help-publish-command",
+			text: t("help.second-step-command-line", { registryUrl })
+		}), hasBun && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+			dataTestId: "help-publish-command-bun",
+			text: require_cli_utils.getCLISetRegistry("bun publish", 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.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__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))
+	}), /* @__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")
+			})
+		]
+	})] });
+};
+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.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","getCLISetRegistry","StepList","Alert","Link","Card","CardContent","Inventory2Outlined","Heading","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';\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 hasBun = configOptions.pkgManagers?.includes('bun');\n  const [setupTab, setSetupTab] = useState<SetupTab>(setupTabs[0]);\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          {hasBun && (\n            <Typography color=\"text.secondary\" sx={{ mt: 1 }} variant=\"body2\">\n              {t('help.steps.login.bun-note')}\n            </Typography>\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: (\n      <>\n        <Command\n          dataTestId=\"help-publish-command\"\n          text={t('help.second-step-command-line', { registryUrl })}\n        />\n        {hasBun && (\n          <Command\n            dataTestId=\"help-publish-command-bun\"\n            text={getCLISetRegistry('bun publish', registryUrl)}\n          />\n        )}\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    <>\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      {/* @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    </>\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      </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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"}

package/build/components/Help/Help.mjs

@@ -1,60 +1,258 @@
 import CopyToClipBoard from "../CopyClipboard/CopyToClipBoard.mjs";
+import { getBunfigRegistry, getCLISBerryYamlRegistry, getCLISetConfigRegistry, getCLISetRegistry, getNpmrcRegistry } from "../../utils/cli-utils.mjs";
 import { useConfig } from "../../providers/AppConfigurationProvider/AppConfigurationProvider.mjs";
 import Heading from "../Heading/Heading.mjs";
-import { CardStyled } from "./styles.mjs";
+import DocsLink from "../DocsLink/DocsLink.mjs";
+import "../DocsLink/index.mjs";
+import { externalLinkComponents } from "../../utils/markdown.mjs";
+import { CardStyled, CommandBox, CustomHelpContent, Step, StepList, StepNumber } from "./styles.mjs";
 import "../../index.mjs";
-import { Fragment } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Alert from "@mui/material/Alert";
+import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import CardContent from "@mui/material/CardContent";
-import Button from "@mui/material/Button";
+import Inventory2Outlined from "@mui/icons-material/Inventory2Outlined";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
 import CardActions from "@mui/material/CardActions";
+import ReactMarkdown from "react-markdown";
 //#region src/components/Help/Help.tsx
-function renderHeadingClipboardSegments(title, text) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
-		variant: "body1",
-		children: title
-	}), /* @__PURE__ */ jsx(CopyToClipBoard, {
-		dataTestId: "segments",
-		text
-	})] });
+var NPMRC = ".npmrc";
+var SETUP_TABS = [
+	"npm",
+	"pnpm",
+	"yarn",
+	"bun",
+	NPMRC
+];
+var DOCS_UPLINKS_URL = "https://verdaccio.org/docs/uplinks";
+/** The one-time command that makes a client use this registry, honouring `web.scope`. */
+function getSetupCommand(tab, scope, registryUrl) {
+	switch (tab) {
+		case "npm": return getCLISetConfigRegistry("npm config set", scope, registryUrl);
+		case "pnpm": return getCLISetConfigRegistry("pnpm config set", scope, registryUrl);
+		case "yarn": return getCLISBerryYamlRegistry(scope, registryUrl).trim();
+		case "bun": return getBunfigRegistry(scope, registryUrl);
+		default: return getNpmrcRegistry(scope, registryUrl);
+	}
 }
-var Help = () => {
+var Command = ({ dataTestId, text }) => /* @__PURE__ */ jsx(CommandBox, { children: /* @__PURE__ */ jsx(CopyToClipBoard, {
+	dataTestId,
+	text,
+	children: /* @__PURE__ */ jsx("code", { children: text })
+}) });
+var HelpStep = ({ index, title, description, children }) => /* @__PURE__ */ jsxs(Step, { children: [/* @__PURE__ */ jsx(StepNumber, {
+	"aria-hidden": true,
+	children: index
+}), /* @__PURE__ */ jsxs(Box, {
+	sx: {
+		minWidth: 0,
+		flex: 1
+	},
+	children: [
+		/* @__PURE__ */ jsx(Typography, {
+			component: "h3",
+			sx: { fontWeight: 600 },
+			variant: "subtitle1",
+			children: title
+		}),
+		description && /* @__PURE__ */ jsx(Typography, {
+			color: "text.secondary",
+			variant: "body2",
+			children: description
+		}),
+		children
+	]
+})] });
+/** The markdown that `web.help` sets, with `{{registryUrl}}` filled in. */
+var CustomHelp = ({ markdown }) => {
+	const { configOptions } = useConfig();
+	return /* @__PURE__ */ jsx(CustomHelpContent, {
+		"data-testid": "help-custom",
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			components: 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 } = useConfig();
+	const { t } = useTranslation();
 	const registryUrl = configOptions.base;
+	const scope = configOptions.scope || void 0;
+	const setupTabs = SETUP_TABS.filter((tab) => tab === NPMRC || configOptions.pkgManagers?.includes(tab));
+	const hasBun = configOptions.pkgManagers?.includes("bun");
+	const [setupTab, setSetupTab] = useState(setupTabs[0]);
+	const steps = [{
+		key: "configure",
+		title: t("help.steps.configure.title"),
+		description: t("help.steps.configure.description"),
+		body: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tabs, {
+			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__ */ jsx(Tab, {
+				"data-testid": `help-setup-${tab}`,
+				label: tab,
+				sx: {
+					minHeight: 36,
+					minWidth: 0,
+					px: 1.5,
+					py: 0,
+					textTransform: "none"
+				},
+				value: tab
+			}, tab))
+		}), /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Command, {
+			dataTestId: "help-login-command",
+			text: t("help.first-step-command-line", { registryUrl })
+		}), hasBun && /* @__PURE__ */ jsx(Typography, {
+			color: "text.secondary",
+			sx: { mt: 1 },
+			variant: "body2",
+			children: t("help.steps.login.bun-note")
+		})] })
+	});
+	steps.push({
+		key: "publish",
+		title: t("help.steps.publish.title"),
+		description: t("help.steps.publish.description"),
+		body: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Command, {
+			dataTestId: "help-publish-command",
+			text: t("help.second-step-command-line", { registryUrl })
+		}), hasBun && /* @__PURE__ */ jsx(Command, {
+			dataTestId: "help-publish-command-bun",
+			text: getCLISetRegistry("bun publish", registryUrl)
+		})] })
+	});
+	if (withWaitStep) steps.push({
+		key: "wait",
+		title: t("help.steps.wait.title"),
+		description: t("help.steps.wait.description")
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepList, {
+		"aria-labelledby": labelledBy,
+		"data-testid": "help-guide",
+		children: steps.map((step, index) => /* @__PURE__ */ jsx(HelpStep, {
+			description: step.description,
+			index: index + 1,
+			title: step.title,
+			children: step.body
+		}, step.key))
+	}), /* @__PURE__ */ jsxs(Alert, {
+		"data-testid": "help-uplinks-note",
+		severity: "info",
+		sx: { mt: 3 },
+		children: [
+			t("help.uplinks-note"),
+			" ",
+			/* @__PURE__ */ jsx(Link, {
+				href: DOCS_UPLINKS_URL,
+				rel: "noopener noreferrer",
+				target: "_blank",
+				children: t("help.uplinks-link")
+			})
+		]
+	})] });
+};
+var Help = () => {
+	const { configOptions } = useConfig();
 	const { t } = useTranslation();
+	const customHelp = configOptions.help?.trim();
+	if (customHelp) return /* @__PURE__ */ jsx(CardStyled, {
+		"data-testid": "help-card",
+		id: "help-card",
+		children: /* @__PURE__ */ jsx(CardContent, {
+			sx: { p: {
+				xs: 2,
+				sm: 4
+			} },
+			children: /* @__PURE__ */ jsx(CustomHelp, { markdown: customHelp })
+		})
+	});
 	return /* @__PURE__ */ jsxs(CardStyled, {
 		"data-testid": "help-card",
 		id: "help-card",
-		children: [/* @__PURE__ */ jsxs(CardContent, { children: [
-			/* @__PURE__ */ jsx(Heading, {
-				gutterBottom: true,
-				id: "help-card__title",
-				variant: "h5",
-				children: t("help.title")
-			}),
-			/* @__PURE__ */ jsx(Heading, {
-				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__ */ jsx(Typography, {
-				variant: "body1",
-				children: t("help.third-step")
-			})
-		] }), /* @__PURE__ */ jsx(CardActions, { children: /* @__PURE__ */ jsx(Button, {
-			color: "primary",
-			href: "https://verdaccio.org/docs/cli-registry",
-			size: "small",
-			children: t("button.learn-more")
-		}) })]
+		children: [/* @__PURE__ */ jsxs(CardContent, {
+			sx: { p: {
+				xs: 2,
+				sm: 4
+			} },
+			children: [/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: {
+						xs: "flex-start",
+						sm: "center"
+					},
+					gap: 2,
+					mb: 3
+				},
+				children: [/* @__PURE__ */ jsx(Inventory2Outlined, {
+					color: "primary",
+					sx: {
+						fontSize: {
+							xs: 32,
+							sm: 48
+						},
+						flexShrink: 0
+					}
+				}), /* @__PURE__ */ jsxs(Box, {
+					sx: { minWidth: 0 },
+					children: [/* @__PURE__ */ jsx(Heading, {
+						id: "help-card__title",
+						sx: {
+							fontSize: {
+								xs: "1.25rem",
+								sm: "1.5rem"
+							},
+							lineHeight: 1.3
+						},
+						variant: "h5",
+						children: t("help.title")
+					}), /* @__PURE__ */ jsx(Typography, {
+						color: "text.secondary",
+						children: t("help.welcome", { title: configOptions.title })
+					})]
+				})]
+			}), /* @__PURE__ */ jsx(HelpGuide, {
+				labelledBy: "help-card__title",
+				withWaitStep: true
+			})]
+		}), /* @__PURE__ */ jsx(CardActions, {
+			sx: {
+				px: {
+					xs: 2,
+					sm: 4
+				},
+				pb: 3
+			},
+			children: /* @__PURE__ */ jsx(DocsLink, { dataTestId: "help-docs-link" })
+		})]
 	});
 };
 //#endregion
-export { Help as default };
+export { CustomHelp, HelpGuide, Help as default, getSetupCommand };
 
 //# sourceMappingURL=Help.mjs.map