npm - @verdaccio/ui-components - Versions diffs - 5.0.0-next-9.25 → 5.0.0-next-9.27 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/build/components/Dependencies/DependencyBlock.js CHANGED Viewed

@@ -30,6 +30,7 @@ var DependencyBlock = ({ title, dependencies }) => {
 	const navigate = (0, react_router.useNavigate)();
 	const { t } = (0, react_i18next.useTranslation)();
 	const deps = Object.entries(dependencies);
+	deps.sort(([nameA], [nameB]) => nameA.localeCompare(nameB));
 	function handleClick(name) {
 		navigate(`${require_routes.Route.DETAIL}${name}`);
 	}

package/build/components/Dependencies/DependencyBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DependencyBlock.js","names":["styled","Typography","Chip","useNavigate","useTranslation","Route","Box"],"sources":["../../../src/components/Dependencies/DependencyBlock.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { Theme } from '../../Theme';\nimport type { PackageDependencies } from '../../types/packageMeta';\nimport { Route } from '../../utils';\n\ninterface DependencyBlockProps {\n title: string;\n dependencies: PackageDependencies;\n}\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n fontWeight: props.theme.fontWeight.bold,\n textTransform: 'capitalize',\n}));\n\nexport const Tags = styled('div')<{ theme?: Theme }>((props) => ({\n display: 'flex',\n justifyContent: 'start',\n flexWrap: 'wrap',\n // force title to be on the same line as the title\n // could be better to avoid margin on the first element\n // but it is a bit tricky to do with flexbox\n marginLeft: props.theme.spacing(-0.6),\n}));\n\nexport const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({\n margin: props.theme.spacing(0.6),\n}));\n\nexport const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {\n const navigate = useNavigate();\n const { t } = useTranslation();\n const deps = Object.entries(dependencies);\n\n function handleClick(name: string): void {\n navigate(`${Route.DETAIL}${name}`);\n }\n\n function labelText(title: string, name: string, version: string): string {\n if (title === 'bundleDependencies') {\n return t('dependencies.dependency-block-bundle', { package: name });\n } else {\n return t('dependencies.dependency-block', { package: name, version });\n }\n }\n\n return (\n <Box data-testid={title} sx={{ margin: 2 }}>\n <StyledText sx={{ marginBottom: 1 }} variant=\"subtitle1\">\n {`${title} (${deps.length})`}\n </StyledText>\n <Tags>\n {deps.map(([name, version]: [string, string]) => {\n // Bundle dependencies are stored as array, for example [ 0: \"semver\" ]\n // so the package name arrives here in the version field\n const packageName = title == 'bundleDependencies' ? version : name;\n return (\n <Tag\n className={'dep-tag'}\n clickable={true}\n data-testid={packageName}\n key={packageName}\n label={labelText(title, packageName, version)}\n onClick={() => {\n handleClick(packageName);\n }}\n />\n );\n })}\n </Tags>\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,IAAa,cAAA,GAAaA,gBAAAA,QAAAA,CAAOC,yBAAAA,OAAU,CAAC,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;AACjB,EAAE;AAEF,IAAa,QAAA,GAAOD,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,WAAW;CAC/D,SAAS;CACT,gBAAgB;CAChB,UAAU;CAIV,YAAY,MAAM,MAAM,QAAQ,GAAI;AACtC,EAAE;AAEF,IAAa,OAAA,GAAMA,gBAAAA,QAAAA,CAAOE,mBAAAA,OAAI,CAAC,EAAqB,WAAW,EAC7D,QAAQ,MAAM,MAAM,QAAQ,EAAG,EACjC,EAAE;AAEF,IAAa,mBAAmD,EAAE,OAAO,mBAAmB;CAC1F,MAAM,YAAA,GAAWC,aAAAA,YAAAA,CAAY;CAC7B,MAAM,EAAE,OAAA,GAAMC,cAAAA,eAAAA,CAAe;CAC7B,MAAM,OAAO,OAAO,QAAQ,YAAY;~~CAExC~~,SAAS,YAAY,MAAoB;EACvC,SAAS,GAAGC,eAAAA,MAAM,SAAS,MAAM;CACnC;CAEA,SAAS,UAAU,OAAe,MAAc,SAAyB;EACvE,IAAI,UAAU,sBACZ,OAAO,EAAE,wCAAwC,EAAE,SAAS,KAAK,CAAC;OAElE,OAAO,EAAE,iCAAiC;GAAE,SAAS;GAAM;EAAQ,CAAC;CAExE;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,kBAAAA,SAAD;EAAK,eAAa;EAAO,IAAI,EAAE,QAAQ,EAAE;EAAzC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GAAY,IAAI,EAAE,cAAc,EAAE;GAAG,SAAQ;GAC1C,UAAA,GAAG,MAAM,IAAI,KAAK,OAAO;EAChB,CAAA,GACZ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACG,KAAK,KAAK,CAAC,MAAM,aAA+B;GAG/C,MAAM,cAAc,SAAS,uBAAuB,UAAU;GAC9D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IACE,WAAW;IACX,WAAW;IACX,eAAa;IAEb,OAAO,UAAU,OAAO,aAAa,OAAO;IAC5C,eAAe;KACb,YAAY,WAAW;IACzB;GACD,GALM,WAKN;EAEL,CAAC,EACG,CAAA,CACH;;AAET"}
1	+ {"version":3,"file":"DependencyBlock.js","names":["styled","Typography","Chip","useNavigate","useTranslation","Route","Box"],"sources":["../../../src/components/Dependencies/DependencyBlock.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { Theme } from '../../Theme';\nimport type { PackageDependencies } from '../../types/packageMeta';\nimport { Route } from '../../utils';\n\ninterface DependencyBlockProps {\n title: string;\n dependencies: PackageDependencies;\n}\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n fontWeight: props.theme.fontWeight.bold,\n textTransform: 'capitalize',\n}));\n\nexport const Tags = styled('div')<{ theme?: Theme }>((props) => ({\n display: 'flex',\n justifyContent: 'start',\n flexWrap: 'wrap',\n // force title to be on the same line as the title\n // could be better to avoid margin on the first element\n // but it is a bit tricky to do with flexbox\n marginLeft: props.theme.spacing(-0.6),\n}));\n\nexport const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({\n margin: props.theme.spacing(0.6),\n}));\n\nexport const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {\n const navigate = useNavigate();\n const { t } = useTranslation();\n const deps = Object.entries(dependencies);\n\n // sort dependencies alphabetically by name\n deps.sort(([nameA], [nameB]) => nameA.localeCompare(nameB));\n\n function handleClick(name: string): void {\n navigate(`${Route.DETAIL}${name}`);\n }\n\n function labelText(title: string, name: string, version: string): string {\n if (title === 'bundleDependencies') {\n return t('dependencies.dependency-block-bundle', { package: name });\n } else {\n return t('dependencies.dependency-block', { package: name, version });\n }\n }\n\n return (\n <Box data-testid={title} sx={{ margin: 2 }}>\n <StyledText sx={{ marginBottom: 1 }} variant=\"subtitle1\">\n {`${title} (${deps.length})`}\n </StyledText>\n <Tags>\n {deps.map(([name, version]: [string, string]) => {\n // Bundle dependencies are stored as array, for example [ 0: \"semver\" ]\n // so the package name arrives here in the version field\n const packageName = title == 'bundleDependencies' ? version : name;\n return (\n <Tag\n className={'dep-tag'}\n clickable={true}\n data-testid={packageName}\n key={packageName}\n label={labelText(title, packageName, version)}\n onClick={() => {\n handleClick(packageName);\n }}\n />\n );\n })}\n </Tags>\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,IAAa,cAAA,GAAaA,gBAAAA,QAAAA,CAAOC,yBAAAA,OAAU,CAAC,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;AACjB,EAAE;AAEF,IAAa,QAAA,GAAOD,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,WAAW;CAC/D,SAAS;CACT,gBAAgB;CAChB,UAAU;CAIV,YAAY,MAAM,MAAM,QAAQ,GAAI;AACtC,EAAE;AAEF,IAAa,OAAA,GAAMA,gBAAAA,QAAAA,CAAOE,mBAAAA,OAAI,CAAC,EAAqB,WAAW,EAC7D,QAAQ,MAAM,MAAM,QAAQ,EAAG,EACjC,EAAE;AAEF,IAAa,mBAAmD,EAAE,OAAO,mBAAmB;CAC1F,MAAM,YAAA,GAAWC,aAAAA,YAAAA,CAAY;CAC7B,MAAM,EAAE,OAAA,GAAMC,cAAAA,eAAAA,CAAe;CAC7B,MAAM,OAAO,OAAO,QAAQ,YAAY;CAGxC,KAAK,MAAM,CAAC,QAAQ,CAAC,WAAW,MAAM,cAAc,KAAK,CAAC;CAE1D,SAAS,YAAY,MAAoB;EACvC,SAAS,GAAGC,eAAAA,MAAM,SAAS,MAAM;CACnC;CAEA,SAAS,UAAU,OAAe,MAAc,SAAyB;EACvE,IAAI,UAAU,sBACZ,OAAO,EAAE,wCAAwC,EAAE,SAAS,KAAK,CAAC;OAElE,OAAO,EAAE,iCAAiC;GAAE,SAAS;GAAM;EAAQ,CAAC;CAExE;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,kBAAAA,SAAD;EAAK,eAAa;EAAO,IAAI,EAAE,QAAQ,EAAE;EAAzC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GAAY,IAAI,EAAE,cAAc,EAAE;GAAG,SAAQ;GAC1C,UAAA,GAAG,MAAM,IAAI,KAAK,OAAO;EAChB,CAAA,GACZ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACG,KAAK,KAAK,CAAC,MAAM,aAA+B;GAG/C,MAAM,cAAc,SAAS,uBAAuB,UAAU;GAC9D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IACE,WAAW;IACX,WAAW;IACX,eAAa;IAEb,OAAO,UAAU,OAAO,aAAa,OAAO;IAC5C,eAAe;KACb,YAAY,WAAW;IACzB;GACD,GALM,WAKN;EAEL,CAAC,EACG,CAAA,CACH;;AAET"}

package/build/components/Dependencies/DependencyBlock.mjs CHANGED Viewed

@@ -24,6 +24,7 @@ var DependencyBlock = ({ title, dependencies }) => {
 	const navigate = useNavigate();
 	const { t } = useTranslation();
 	const deps = Object.entries(dependencies);
+	deps.sort(([nameA], [nameB]) => nameA.localeCompare(nameB));
 	function handleClick(name) {
 		navigate(`${Route$1.DETAIL}${name}`);
 	}

package/build/components/Dependencies/DependencyBlock.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DependencyBlock.mjs","names":["Route"],"sources":["../../../src/components/Dependencies/DependencyBlock.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { Theme } from '../../Theme';\nimport type { PackageDependencies } from '../../types/packageMeta';\nimport { Route } from '../../utils';\n\ninterface DependencyBlockProps {\n title: string;\n dependencies: PackageDependencies;\n}\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n fontWeight: props.theme.fontWeight.bold,\n textTransform: 'capitalize',\n}));\n\nexport const Tags = styled('div')<{ theme?: Theme }>((props) => ({\n display: 'flex',\n justifyContent: 'start',\n flexWrap: 'wrap',\n // force title to be on the same line as the title\n // could be better to avoid margin on the first element\n // but it is a bit tricky to do with flexbox\n marginLeft: props.theme.spacing(-0.6),\n}));\n\nexport const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({\n margin: props.theme.spacing(0.6),\n}));\n\nexport const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {\n const navigate = useNavigate();\n const { t } = useTranslation();\n const deps = Object.entries(dependencies);\n\n function handleClick(name: string): void {\n navigate(`${Route.DETAIL}${name}`);\n }\n\n function labelText(title: string, name: string, version: string): string {\n if (title === 'bundleDependencies') {\n return t('dependencies.dependency-block-bundle', { package: name });\n } else {\n return t('dependencies.dependency-block', { package: name, version });\n }\n }\n\n return (\n <Box data-testid={title} sx={{ margin: 2 }}>\n <StyledText sx={{ marginBottom: 1 }} variant=\"subtitle1\">\n {`${title} (${deps.length})`}\n </StyledText>\n <Tags>\n {deps.map(([name, version]: [string, string]) => {\n // Bundle dependencies are stored as array, for example [ 0: \"semver\" ]\n // so the package name arrives here in the version field\n const packageName = title == 'bundleDependencies' ? version : name;\n return (\n <Tag\n className={'dep-tag'}\n clickable={true}\n data-testid={packageName}\n key={packageName}\n label={labelText(title, packageName, version)}\n onClick={() => {\n handleClick(packageName);\n }}\n />\n );\n })}\n </Tags>\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;;AAiBA,IAAa,aAAa,OAAO,UAAU,CAAC,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;AACjB,EAAE;AAEF,IAAa,OAAO,OAAO,KAAK,CAAC,EAAqB,WAAW;CAC/D,SAAS;CACT,gBAAgB;CAChB,UAAU;CAIV,YAAY,MAAM,MAAM,QAAQ,GAAI;AACtC,EAAE;AAEF,IAAa,MAAM,OAAO,IAAI,CAAC,EAAqB,WAAW,EAC7D,QAAQ,MAAM,MAAM,QAAQ,EAAG,EACjC,EAAE;AAEF,IAAa,mBAAmD,EAAE,OAAO,mBAAmB;CAC1F,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,OAAO,OAAO,QAAQ,YAAY;~~CAExC~~,SAAS,YAAY,MAAoB;EACvC,SAAS,GAAGA,QAAM,SAAS,MAAM;CACnC;CAEA,SAAS,UAAU,OAAe,MAAc,SAAyB;EACvE,IAAI,UAAU,sBACZ,OAAO,EAAE,wCAAwC,EAAE,SAAS,KAAK,CAAC;OAElE,OAAO,EAAE,iCAAiC;GAAE,SAAS;GAAM;EAAQ,CAAC;CAExE;CAEA,OACE,qBAAC,KAAD;EAAK,eAAa;EAAO,IAAI,EAAE,QAAQ,EAAE;EAAzC,UAAA,CACE,oBAAC,YAAD;GAAY,IAAI,EAAE,cAAc,EAAE;GAAG,SAAQ;GAC1C,UAAA,GAAG,MAAM,IAAI,KAAK,OAAO;EAChB,CAAA,GACZ,oBAAC,MAAD,EAAA,UACG,KAAK,KAAK,CAAC,MAAM,aAA+B;GAG/C,MAAM,cAAc,SAAS,uBAAuB,UAAU;GAC9D,OACE,oBAAC,KAAD;IACE,WAAW;IACX,WAAW;IACX,eAAa;IAEb,OAAO,UAAU,OAAO,aAAa,OAAO;IAC5C,eAAe;KACb,YAAY,WAAW;IACzB;GACD,GALM,WAKN;EAEL,CAAC,EACG,CAAA,CACH;;AAET"}
1	+ {"version":3,"file":"DependencyBlock.mjs","names":["Route"],"sources":["../../../src/components/Dependencies/DependencyBlock.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { Theme } from '../../Theme';\nimport type { PackageDependencies } from '../../types/packageMeta';\nimport { Route } from '../../utils';\n\ninterface DependencyBlockProps {\n title: string;\n dependencies: PackageDependencies;\n}\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n fontWeight: props.theme.fontWeight.bold,\n textTransform: 'capitalize',\n}));\n\nexport const Tags = styled('div')<{ theme?: Theme }>((props) => ({\n display: 'flex',\n justifyContent: 'start',\n flexWrap: 'wrap',\n // force title to be on the same line as the title\n // could be better to avoid margin on the first element\n // but it is a bit tricky to do with flexbox\n marginLeft: props.theme.spacing(-0.6),\n}));\n\nexport const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({\n margin: props.theme.spacing(0.6),\n}));\n\nexport const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {\n const navigate = useNavigate();\n const { t } = useTranslation();\n const deps = Object.entries(dependencies);\n\n // sort dependencies alphabetically by name\n deps.sort(([nameA], [nameB]) => nameA.localeCompare(nameB));\n\n function handleClick(name: string): void {\n navigate(`${Route.DETAIL}${name}`);\n }\n\n function labelText(title: string, name: string, version: string): string {\n if (title === 'bundleDependencies') {\n return t('dependencies.dependency-block-bundle', { package: name });\n } else {\n return t('dependencies.dependency-block', { package: name, version });\n }\n }\n\n return (\n <Box data-testid={title} sx={{ margin: 2 }}>\n <StyledText sx={{ marginBottom: 1 }} variant=\"subtitle1\">\n {`${title} (${deps.length})`}\n </StyledText>\n <Tags>\n {deps.map(([name, version]: [string, string]) => {\n // Bundle dependencies are stored as array, for example [ 0: \"semver\" ]\n // so the package name arrives here in the version field\n const packageName = title == 'bundleDependencies' ? version : name;\n return (\n <Tag\n className={'dep-tag'}\n clickable={true}\n data-testid={packageName}\n key={packageName}\n label={labelText(title, packageName, version)}\n onClick={() => {\n handleClick(packageName);\n }}\n />\n );\n })}\n </Tags>\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;;AAiBA,IAAa,aAAa,OAAO,UAAU,CAAC,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;AACjB,EAAE;AAEF,IAAa,OAAO,OAAO,KAAK,CAAC,EAAqB,WAAW;CAC/D,SAAS;CACT,gBAAgB;CAChB,UAAU;CAIV,YAAY,MAAM,MAAM,QAAQ,GAAI;AACtC,EAAE;AAEF,IAAa,MAAM,OAAO,IAAI,CAAC,EAAqB,WAAW,EAC7D,QAAQ,MAAM,MAAM,QAAQ,EAAG,EACjC,EAAE;AAEF,IAAa,mBAAmD,EAAE,OAAO,mBAAmB;CAC1F,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,OAAO,OAAO,QAAQ,YAAY;CAGxC,KAAK,MAAM,CAAC,QAAQ,CAAC,WAAW,MAAM,cAAc,KAAK,CAAC;CAE1D,SAAS,YAAY,MAAoB;EACvC,SAAS,GAAGA,QAAM,SAAS,MAAM;CACnC;CAEA,SAAS,UAAU,OAAe,MAAc,SAAyB;EACvE,IAAI,UAAU,sBACZ,OAAO,EAAE,wCAAwC,EAAE,SAAS,KAAK,CAAC;OAElE,OAAO,EAAE,iCAAiC;GAAE,SAAS;GAAM;EAAQ,CAAC;CAExE;CAEA,OACE,qBAAC,KAAD;EAAK,eAAa;EAAO,IAAI,EAAE,QAAQ,EAAE;EAAzC,UAAA,CACE,oBAAC,YAAD;GAAY,IAAI,EAAE,cAAc,EAAE;GAAG,SAAQ;GAC1C,UAAA,GAAG,MAAM,IAAI,KAAK,OAAO;EAChB,CAAA,GACZ,oBAAC,MAAD,EAAA,UACG,KAAK,KAAK,CAAC,MAAM,aAA+B;GAG/C,MAAM,cAAc,SAAS,uBAAuB,UAAU;GAC9D,OACE,oBAAC,KAAD;IACE,WAAW;IACX,WAAW;IACX,eAAa;IAEb,OAAO,UAAU,OAAO,aAAa,OAAO;IAC5C,eAAe;KACb,YAAY,WAAW;IACzB;GACD,GALM,WAKN;EAEL,CAAC,EACG,CAAA,CACH;;AAET"}

package/build/components/Help/Help.js CHANGED Viewed

@@ -42,6 +42,8 @@ var SETUP_TABS = [
 	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) {
@@ -98,8 +100,8 @@ var HelpGuide = ({ withWaitStep = false, labelledBy }) => {
 	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 isBun = setupTab === "bun";
 	const steps = [{
 		key: "configure",
 		title: t("help.steps.configure.title"),
@@ -136,34 +138,65 @@ var HelpGuide = ({ withWaitStep = false, labelledBy }) => {
 		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")
-		})] })
+		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: /* @__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, {
+		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.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.StepList, {
+	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, {
@@ -172,21 +205,7 @@ var HelpGuide = ({ withWaitStep = false, labelledBy }) => {
 			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();
@@ -211,47 +230,65 @@ var Help = () => {
 				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",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
 					sx: {
-						fontSize: {
-							xs: 32,
-							sm: 48
+						display: "flex",
+						alignItems: {
+							xs: "flex-start",
+							sm: "center"
 						},
-						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",
+						gap: 2,
+						mb: 3
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_Inventory2Outlined.default, {
+						color: "primary",
 						sx: {
 							fontSize: {
-								xs: "1.25rem",
-								sm: "1.5rem"
+								xs: 32,
+								sm: 48
 							},
-							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 })
+							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)(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: {

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

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

package/build/components/Help/Help.mjs CHANGED Viewed

@@ -30,6 +30,8 @@ var SETUP_TABS = [
 	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) {
@@ -86,8 +88,8 @@ var HelpGuide = ({ withWaitStep = false, labelledBy }) => {
 	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 isBun = setupTab === "bun";
 	const steps = [{
 		key: "configure",
 		title: t("help.steps.configure.title"),
@@ -124,34 +126,65 @@ var HelpGuide = ({ withWaitStep = false, labelledBy }) => {
 		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")
-		})] })
+		body: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Command, {
+				dataTestId: "help-login-command",
+				text: t("help.first-step-command-line", { registryUrl })
+			}),
+			isBun && /* @__PURE__ */ jsx(Typography, {
+				color: "text.secondary",
+				sx: { mt: 1 },
+				variant: "body2",
+				children: t("help.steps.login.bun-note")
+			}),
+			setupTab === "yarn" && /* @__PURE__ */ jsxs(Box, {
+				"data-testid": "help-login-yarn-plugin",
+				sx: { mt: 2 },
+				children: [
+					/* @__PURE__ */ jsxs(Typography, {
+						color: "text.secondary",
+						variant: "body2",
+						children: [
+							t("help.steps.login.yarn-note"),
+							" ",
+							/* @__PURE__ */ jsx(Link, {
+								href: YARN_PLUGIN_NPM_URL,
+								rel: "noopener noreferrer",
+								target: "_blank",
+								children: t("help.steps.login.yarn-plugin-link")
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Command, {
+						dataTestId: "help-login-yarn-plugin-install",
+						text: YARN_PLUGIN_INSTALL
+					}),
+					/* @__PURE__ */ jsx(Command, {
+						dataTestId: "help-login-yarn-command",
+						text: getCLISetRegistry("yarn npm login", registryUrl)
+					})
+				]
+			})
+		] })
 	});
 	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, {
+		body: isBun ? /* @__PURE__ */ jsx(Command, {
 			dataTestId: "help-publish-command-bun",
 			text: getCLISetRegistry("bun publish", registryUrl)
-		})] })
+		}) : /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepList, {
+	return /* @__PURE__ */ jsx(StepList, {
 		"aria-labelledby": labelledBy,
 		"data-testid": "help-guide",
 		children: steps.map((step, index) => /* @__PURE__ */ jsx(HelpStep, {
@@ -160,21 +193,7 @@ var HelpGuide = ({ withWaitStep = false, labelledBy }) => {
 			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();
@@ -199,47 +218,65 @@ var Help = () => {
 				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",
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
 					sx: {
-						fontSize: {
-							xs: 32,
-							sm: 48
+						display: "flex",
+						alignItems: {
+							xs: "flex-start",
+							sm: "center"
 						},
-						flexShrink: 0
-					}
-				}), /* @__PURE__ */ jsxs(Box, {
-					sx: { minWidth: 0 },
-					children: [/* @__PURE__ */ jsx(Heading, {
-						id: "help-card__title",
+						gap: 2,
+						mb: 3
+					},
+					children: [/* @__PURE__ */ jsx(Inventory2Outlined, {
+						color: "primary",
 						sx: {
 							fontSize: {
-								xs: "1.25rem",
-								sm: "1.5rem"
+								xs: 32,
+								sm: 48
 							},
-							lineHeight: 1.3
-						},
-						variant: "h5",
-						children: t("help.title")
-					}), /* @__PURE__ */ jsx(Typography, {
-						color: "text.secondary",
-						children: t("help.welcome", { title: configOptions.title })
+							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(HelpGuide, {
+					labelledBy: "help-card__title",
+					withWaitStep: true
+				}),
+				/* @__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")
+						})
+					]
+				})
+			]
 		}), /* @__PURE__ */ jsx(CardActions, {
 			sx: {
 				px: {