@verdaccio/ui-components 2.0.0-6-next.8 → 2.0.0-6-next.10

package/src/components/FundButton/FundButton.stories.tsx

@@ -1,25 +1,56 @@
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { default as FundButton } from '.';
 
-export default {
-  title: 'FundButton',
+const meta: Meta<typeof FundButton> = {
+  title: 'Components/Sidebar/FundButton',
+  component: FundButton,
 };
 
-export const FundButtonUrl: any = () => (
-  <Box sx={{ width: '100%' }}>
-    <Stack spacing={2}>
-      <FundButton
-        packageMeta={{
-          latest: {
-            funding: {
-              url: 'https://opencollective.com/verdaccio',
-            },
-          },
-        }}
-      />
-    </Stack>
-  </Box>
-);
+export default meta;
+type Story = StoryObj<typeof FundButton>;
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => {
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Stack spacing={2}>
+          <FundButton
+            packageMeta={{
+              latest: {
+                funding: {
+                  url: 'https://opencollective.com/verdaccio',
+                },
+              },
+            }}
+          />
+        </Stack>
+      </Box>
+    );
+  },
+};
+
+export const Bad: Story = {
+  name: 'Bad Link (empty)',
+  render: () => {
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Stack spacing={2}>
+          <FundButton
+            packageMeta={{
+              latest: {
+                funding: {
+                  url: 'bad_link',
+                },
+              },
+            }}
+          />
+        </Stack>
+      </Box>
+    );
+  },
+};

package/src/components/Help/Help.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { default as Help } from '.';
 
 export default {
-  title: 'Help',
+  title: 'Components/Home/Help',
 };
 
 export const HelpMessage: any = () => <Help />;

package/src/components/Icons/Icons.stories.tsx

@@ -16,7 +16,7 @@ import {
 } from '.';
 
 export default {
-  title: 'Icons',
+  title: 'Components/Icons/Overview',
 };
 
 export const Icons: any = () => (

package/src/components/Install/Install.stories.tsx

@@ -1,34 +1,87 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { default as Install } from '.';
 import { useConfig } from '../../';
 
-export default {
-  title: 'Install  ',
+const meta: Meta<typeof Install> = {
+  title: 'Components/Sidebar/Install',
+  component: Install,
 };
 
-export const ActionBarAll: any = () => {
-  const { configOptions } = useConfig();
-  return (
-    <Install
-      configOptions={{ ...configOptions, pkgManagers: ['npm', 'yarn', 'pnpm'] }}
-      packageMeta={{
-        _uplinks: {},
-        latest: {
-          name: 'verdaccio-ui/local-storage',
-          version: '8.0.1-next.1',
-          dist: {
-            fileCount: 0,
-            unpackedSize: 0,
-            tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
-          },
-          homepage: 'https://verdaccio.org',
-          bugs: {
-            url: 'https://github.com/verdaccio/monorepo/issues',
-          },
-        },
-      }}
-      packageName="jquery"
-    />
-  );
+export default meta;
+type Story = StoryObj<typeof Install>;
+
+const packageMeta = {
+  _uplinks: {},
+  latest: {
+    name: 'verdaccio-ui/local-storage',
+    version: '8.0.1-next.1',
+    dist: {
+      fileCount: 0,
+      unpackedSize: 0,
+      tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+    },
+    homepage: 'https://verdaccio.org',
+    bugs: {
+      url: 'https://github.com/verdaccio/monorepo/issues',
+    },
+  },
+};
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => {
+    const { configOptions } = useConfig();
+    return (
+      <Install
+        configOptions={{ ...configOptions, pkgManagers: ['npm', 'yarn', 'pnpm'] }}
+        packageMeta={packageMeta}
+        packageName="jquery"
+      />
+    );
+  },
+};
+
+export const npmOnly: Story = {
+  name: 'Only NPM',
+  render: () => {
+    const { configOptions } = useConfig();
+    return (
+      <Install
+        configOptions={{ ...configOptions, pkgManagers: ['npm'] }}
+        packageMeta={packageMeta}
+        packageName="jquery"
+      />
+    );
+  },
+};
+
+export const yarnOnly: Story = {
+  name: 'Only Yarn',
+  render: () => {
+    const { configOptions } = useConfig();
+    return (
+      <Install
+        configOptions={{ ...configOptions, pkgManagers: ['yarn'] }}
+        packageMeta={packageMeta}
+        packageName="jquery"
+      />
+    );
+  },
+};
+
+export const pnpmOnly: Story = {
+  name: 'Only Pnpm',
+  render: () => {
+    const { configOptions } = useConfig();
+    return (
+      <Install
+        configOptions={{ ...configOptions, pkgManagers: ['pnpm'] }}
+        packageMeta={packageMeta}
+        packageName="jquery"
+      />
+    );
+  },
 };

package/src/components/Install/Install.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import { Typography } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,6 +10,7 @@ import { TemplateUIOptions } from '@verdaccio/types';
 
 import { Theme } from '../../Theme';
 import { PackageMetaInterface } from '../../types/packageMeta';
+import { SettingsMenu } from '../SettingsMenu';
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
 const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
@@ -23,30 +26,41 @@ export type Props = {
 
 const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) => {
   const { t } = useTranslation();
+  const theme = useTheme();
 
   if (!packageMeta || !packageName) {
     return null;
   }
+
   const hasNpm = configOptions?.pkgManagers?.includes('npm');
   const hasYarn = configOptions?.pkgManagers?.includes('yarn');
   const hasPnpm = configOptions?.pkgManagers?.includes('pnpm') ?? true;
   const hasPkgManagers = hasNpm || hasPnpm || hasYarn;
 
   return hasPkgManagers ? (
-    <List
-      data-testid={'installList'}
-      subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}
-    >
-      {hasNpm && (
-        <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
-      )}
-      {hasYarn && (
-        <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
-      )}
-      {hasPnpm && (
-        <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
-      )}
-    </List>
+    <>
+      <Grid
+        container={true}
+        justifyContent="flex-end"
+        sx={{ marginRight: theme.spacing(10), alingText: 'right' }}
+      >
+        <SettingsMenu packageName={packageName} />
+      </Grid>
+      <List
+        data-testid={'installList'}
+        subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}
+      >
+        {hasNpm && (
+          <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
+        )}
+        {hasYarn && (
+          <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
+        )}
+        {hasPnpm && (
+          <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
+        )}
+      </List>
+    </>
   ) : null;
 };
 

package/src/components/Install/InstallListItem.tsx

@@ -5,6 +5,7 @@ import ListItemText from '@mui/material/ListItemText';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useSettings } from '../../providers/PersistenceSettingProvider';
 import CopyToClipBoard from '../CopyClipboard';
 import { Npm, Pnpm, Yarn } from '../Icons';
 
@@ -16,13 +17,13 @@ const InstallItem = styled(ListItem)({
 });
 
 const InstallListItemText = styled(ListItemText)({
-  padding: '0 10px',
+  padding: '0 0 0 10px',
   margin: 0,
 });
 
 const PackageMangerAvatar = styled(Avatar)({
   borderRadius: '0px',
-  padding: '0',
+  padding: 0,
 });
 
 export enum DependencyManager {
@@ -38,6 +39,9 @@ interface Interface {
 
 const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
   const { t } = useTranslation();
+  const { localSettings } = useSettings();
+  const isGlobal = localSettings[packageName]?.global ?? false;
+  const pkgName = isGlobal ? `-g ${packageName}` : packageName;
 
   switch (dependencyManager) {
     case DependencyManager.NPM:
@@ -50,8 +54,12 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
             primary={
               <CopyToClipBoard
                 dataTestId="installYarn"
-                text={t('sidebar.installation.install-using-npm-command', { packageName })}
-                title={t('sidebar.installation.install-using-npm-command', { packageName })}
+                text={t('sidebar.installation.install-using-npm-command', {
+                  packageName: pkgName,
+                })}
+                title={t('sidebar.installation.install-using-npm-command', {
+                  packageName: pkgName,
+                })}
               />
             }
             secondary={t('sidebar.installation.install-using-npm')}
@@ -68,8 +76,12 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
             primary={
               <CopyToClipBoard
                 dataTestId="installYarn"
-                text={t('sidebar.installation.install-using-yarn-command', { packageName })}
-                title={t('sidebar.installation.install-using-yarn-command', { packageName })}
+                text={t('sidebar.installation.install-using-yarn-command', {
+                  packageName: pkgName,
+                })}
+                title={t('sidebar.installation.install-using-yarn-command', {
+                  packageName: pkgName,
+                })}
               />
             }
             secondary={t('sidebar.installation.install-using-yarn')}
@@ -86,8 +98,12 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
             primary={
               <CopyToClipBoard
                 dataTestId="installPnpm"
-                text={t('sidebar.installation.install-using-pnpm-command', { packageName })}
-                title={t('sidebar.installation.install-using-pnpm-command', { packageName })}
+                text={t('sidebar.installation.install-using-pnpm-command', {
+                  packageName: pkgName,
+                })}
+                title={t('sidebar.installation.install-using-pnpm-command', {
+                  packageName: pkgName,
+                })}
               />
             }
             secondary={t('sidebar.installation.install-using-pnpm')}

package/src/components/Loading/Loading.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Loading from './Loading';
 
 export default {
-  title: 'Loading',
+  title: 'Components/Detail/Loading',
 };
 
 export const Icons: any = () => (

package/src/components/LoginDialog/LoginDialog.stories.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import LoginDialog from './LoginDialog';
 
 export default {
-  title: 'LoginDialog',
+  title: 'Components/Dialog/LoginDialog',
 };
 
 export const OpenLoginDialog = {

package/src/components/NoItems/NoItems.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { default as NoItems } from '.';
 
 export default {
-  title: 'Install  ',
+  title: 'Components/Detail/No Items',
 };
 
 export const NoItemsText: any = () => {

package/src/components/NoItems/NoItems.tsx

@@ -1,16 +1,15 @@
+import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 
 interface Props {
   text: string;
-  className?: string;
 }
 
-const NoItems: React.FC<Props> = ({ className, text, ...props }) => (
-  // eslint-disable-next-line verdaccio/jsx-spread
-  <Typography {...props} className={className} gutterBottom={true} variant="subtitle1">
-    {text}
-  </Typography>
+const NoItems: React.FC<Props> = ({ text, ...props }) => (
+  <Alert severity="info">
+    <Typography {...props}>{text}</Typography>
+  </Alert>
 );
 
 export default NoItems;

package/src/components/Package/Package.tsx

@@ -122,7 +122,7 @@ const Package: React.FC<PackageInterface> = ({
     license && (
       <OverviewItem>
         <StyledLaw />
-        {license}
+        {license as string}
       </OverviewItem>
     );
 

package/src/components/Repository/Repository.stories.tsx

@@ -1,13 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { default as Repository } from '.';
 
-export default {
-  title: 'Repository',
+const meta: Meta<typeof Repository> = {
+  title: 'Components/Sidebar/Repository',
+  component: Repository,
 };
+export default meta;
+type Story = StoryObj<typeof Repository>;
 
-export const RepositoryGit: any = () => {
-  return (
+export const Primary: Story = {
+  name: 'Git Repository',
+  render: () => {
+    return (
+      <Repository
+        packageMeta={{
+          _uplinks: {},
+          latest: {
+            name: 'verdaccio-ui/local-storage',
+            version: '8.0.1-next.1',
+            repository: {
+              type: 'git',
+              url: 'git://github.com/verdaccio/ui.git',
+            },
+          },
+        }}
+      />
+    );
+  },
+};
+
+export const HTTPS: Story = {
+  name: 'Https repo',
+  render: () => (
     <Repository
       packageMeta={{
         _uplinks: {},
@@ -15,17 +41,18 @@ export const RepositoryGit: any = () => {
           name: 'verdaccio-ui/local-storage',
           version: '8.0.1-next.1',
           repository: {
-            type: 'git',
-            url: 'git://github.com/verdaccio/ui.git',
+            type: 'https',
+            url: 'https://github.com/verdaccio/ui.git',
           },
         },
       }}
     />
-  );
+  ),
 };
 
-export const RepositoryHTTPS: any = () => {
-  return (
+export const HTTP: Story = {
+  name: 'Http repo',
+  render: () => (
     <Repository
       packageMeta={{
         _uplinks: {},
@@ -33,11 +60,11 @@ export const RepositoryHTTPS: any = () => {
           name: 'verdaccio-ui/local-storage',
           version: '8.0.1-next.1',
           repository: {
-            type: 'https',
-            url: 'https://github.com/verdaccio/ui.git',
+            type: 'http',
+            url: 'http://github.com/verdaccio/ui.git',
           },
         },
       }}
     />
-  );
+  ),
 };

package/src/components/Repository/Repository.tsx

@@ -47,13 +47,11 @@ const RepositoryAvatar = styled(Avatar)({
 
 const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
-
-  if (!packageMeta?.latest?.repository?.url || !urlUtils.isURL(packageMeta.latest.repository.url)) {
+  const url = packageMeta?.latest?.repository?.url;
+  if (!url || !urlUtils.isURL(url)) {
     return null;
   }
 
-  const { url } = packageMeta.latest.repository;
-
   const getCorrectRepositoryURL = (): string => {
     if (!url.includes('git+')) {
       return url;

package/src/components/Search/Search.stories.tsx

@@ -6,7 +6,7 @@ import { MemoryRouter } from 'react-router';
 import Search from './Search';
 
 export default {
-  title: 'Search',
+  title: 'Components/Header/Search',
 };
 
 export const SearchByQuery = {

package/src/components/SettingsMenu/SettingsMenu.tsx

@@ -0,0 +1,67 @@
+import Check from '@mui/icons-material/Check';
+import Settings from '@mui/icons-material/Settings';
+import IconButton from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSettings } from '../../providers/PersistenceSettingProvider';
+
+interface Props {
+  packageName: string;
+}
+
+const InstallListItem: React.FC<Props> = ({ packageName }) => {
+  const { t } = useTranslation();
+  const { localSettings, updateSettings } = useSettings();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleOpenMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClick = () => {
+    const statusGlobal = !localSettings[packageName]?.global;
+    updateSettings({ [packageName]: { global: statusGlobal } });
+    setAnchorEl(null);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <>
+      <IconButton
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-haspopup="true"
+        id="basic-button"
+        onClick={handleOpenMenu}
+        size="small"
+      >
+        <Settings fontSize="small" />
+      </IconButton>
+      <Menu
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+        anchorEl={anchorEl}
+        id="basic-menu"
+        onClose={handleClose}
+        open={open}
+      >
+        <MenuItem onClick={handleClick}>
+          {' '}
+          {localSettings?.global ? (
+            <ListItemIcon>
+              <Check />
+            </ListItemIcon>
+          ) : null}
+          {t('sidebar.installation.global')}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default InstallListItem;

package/src/components/SettingsMenu/index.ts

@@ -0,0 +1 @@
+export { default as SettingsMenu } from './SettingsMenu';

package/src/components/SideBarTittle/SideBarTittle.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { default as SideBarTittle } from '.';
+
+const meta: Meta<typeof SideBarTittle> = {
+  title: 'Components/Sidebar/Title',
+  component: SideBarTittle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SideBarTittle>;
+
+export const Commonjs: Story = {
+  name: 'CommonJS package',
+  render: () => (
+    <SideBarTittle
+      isLatest={false}
+      moduleType="commonjs"
+      packageName="jquery"
+      time="2012-12-31T06:54:14.275Z"
+      version="1.0.0"
+    />
+  ),
+};
+
+export const ES6: Story = {
+  name: 'ES6 package',
+  render: () => (
+    <SideBarTittle
+      isLatest={true}
+      moduleType="module"
+      packageName="react"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};
+
+export const Description: Story = {
+  name: 'With description',
+  render: () => (
+    <SideBarTittle
+      description="Storybook's CLI - easiest method of adding storybook to your projects"
+      isLatest={true}
+      moduleType="module"
+      packageName="storybook"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};
+
+export const WithTypes: Story = {
+  name: 'With types declaration',
+  render: () => (
+    <SideBarTittle
+      description="Storybook's CLI - easiest method of adding storybook to your projects"
+      hasTypes={true}
+      isLatest={true}
+      moduleType="module"
+      packageName="storybook"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};