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

package/build/utils/utils.js

@@ -17,11 +17,11 @@ var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFor
 var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
 var _i18next = _interopRequireDefault(require("i18next"));
 var _isString = _interopRequireDefault(require("lodash/isString"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var TIMEFORMAT = 'L LTS';
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TIMEFORMAT = 'L LTS';
 exports.TIMEFORMAT = TIMEFORMAT;
-_dayjs["default"].extend(_relativeTime["default"]);
-_dayjs["default"].extend(_localizedFormat["default"]);
+_dayjs.default.extend(_relativeTime.default);
+_dayjs.default.extend(_localizedFormat.default);
 
 /**
  * Formats license field for webui.
@@ -30,7 +30,7 @@ _dayjs["default"].extend(_localizedFormat["default"]);
 // License should use type License defined above, but conflicts with the unit test that provide array or empty object
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function formatLicense(license) {
-  if ((0, _isString["default"])(license)) {
+  if ((0, _isString.default)(license)) {
     return license;
   }
   if (license !== null && license !== void 0 && license.type) {
@@ -46,7 +46,7 @@ function formatLicense(license) {
 // Repository should use type Repository defined above, but conflicts with the unit test that provide array or empty object
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function formatRepository(repository) {
-  if ((0, _isString["default"])(repository)) {
+  if ((0, _isString.default)(repository)) {
     return repository;
   }
   if (repository !== null && repository !== void 0 && repository.url) {
@@ -55,21 +55,20 @@ function formatRepository(repository) {
   return null;
 }
 function formatDate(lastUpdate) {
-  return (0, _dayjs["default"])(new Date(lastUpdate)).format(TIMEFORMAT);
+  return (0, _dayjs.default)(new Date(lastUpdate)).format(TIMEFORMAT);
 }
 function formatDateDistance(lastUpdate) {
-  return (0, _dayjs["default"])(new Date(lastUpdate)).fromNow();
+  return (0, _dayjs.default)(new Date(lastUpdate)).fromNow();
 }
 
 /**
  * For <LastSync /> component
  * @param {array} uplinks
  */
-function getLastUpdatedPackageTime() {
-  var uplinks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var lastUpdate = 0;
+function getLastUpdatedPackageTime(uplinks = {}) {
+  let lastUpdate = 0;
   Object.keys(uplinks).forEach(function computeUplink(upLinkName) {
-    var status = uplinks[upLinkName];
+    const status = uplinks[upLinkName];
     if (status.fetched > lastUpdate) {
       lastUpdate = status.fetched;
     }
@@ -82,22 +81,19 @@ function getLastUpdatedPackageTime() {
  * @param {Object} time
  * @returns {Array} last 3 releases
  */
-function getRecentReleases() {
-  var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var recent = Object.keys(time).map(function (version) {
-    return {
-      version: version,
-      time: formatDate(time[version])
-    };
-  });
+function getRecentReleases(time = {}) {
+  const recent = Object.keys(time).map(version => ({
+    version,
+    time: formatDate(time[version])
+  }));
   return recent.slice(recent.length - 3, recent.length).reverse();
 }
 function getAuthorName(authorName) {
   if (!authorName) {
-    return _i18next["default"].t('author-unknown');
+    return _i18next.default.t('author-unknown');
   }
   if (authorName.toLowerCase() === 'anonymous') {
-    return _i18next["default"].t('author-anonymous');
+    return _i18next.default.t('author-anonymous');
   }
   return authorName;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "2.0.0-6-next.9",
+  "version": "2.0.0-6-next.10",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -10,6 +10,8 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@fontsource/material-icons": "^4.5.4",
+    "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
     "@mui/styles": "5.12.0",
@@ -17,8 +19,6 @@
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@rematch/persist": "2.1.2",
-    "@fontsource/material-icons": "^4.5.4",
-    "@fontsource/roboto": "^4.5.8",
     "country-flag-icons": "1.5.5",
     "dayjs": "1.11.7",
     "dompurify": "2.4.5",
@@ -28,7 +28,7 @@
     "i18next": "20.6.1",
     "localstorage-memory": "1.0.3",
     "lodash": "4.17.21",
-    "marked": "4.2.12",
+    "marked": "4.3.0",
     "normalize.css": "8.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -45,7 +45,6 @@
     "validator": "13.9.0"
   },
   "devDependencies": {
-    "@verdaccio/types": "11.0.0-6-next.25",
     "@babel/core": "^7.20.7",
     "@emotion/babel-plugin": "11.10.6",
     "@emotion/jest": "11.10.5",
@@ -63,6 +62,7 @@
     "@types/hast": "^2.0.0",
     "@types/react-router": "^5.1.20",
     "@types/unist": "^2.0.0",
+    "@verdaccio/types": "11.0.0-6-next.25",
     "babel-loader": "^8.3.0",
     "mockdate": "3.0.5",
     "msw": "0.49.2"

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -1,50 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { clone, merge } from 'lodash';
 import React from 'react';
 
 import { default as ActionBar } from '.';
 
-export default {
-  title: 'ActionBar  ',
-};
-
-export const ActionBarAll: any = () => (
-  <ActionBar
-    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 RawViewer: any = () => (
-  <ActionBar
-    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',
-        },
-      },
-    }}
-    showRaw={true}
-  />
-);
+const meta: Meta<typeof ActionBar> = {
+  title: 'Components/Sidebar/ActionBar',
+  component: ActionBar,
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionBar>;
+
+const packageMeta = {
+  _uplinks: {},
+  latest: {
+    name: 'verdaccio-ui/local-storage',
+    version: '8.0.1-next.1',
+    dist: {
+      fileCount: 0,
+      unpackedSize: 0,
+      tarball: 'https://registry.verdaccio.org/storybook/-/storybook-0.2.0.tgz',
+    },
+    homepage: 'https://verdaccio.org',
+    bugs: {
+      url: 'https://github.com/verdaccio/monorepo/issues',
+    },
+  },
+};
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => <ActionBar packageMeta={packageMeta} />,
+};
+
+export const Raw: Story = {
+  name: 'Raw viewer',
+  render: () => <ActionBar packageMeta={packageMeta} showRaw={true} />,
+};
+
+export const NoLatest: Story = {
+  name: 'No latest (empty)',
+  render: () => <ActionBar packageMeta={{}} showRaw={true} />,
+};
+
+export const Download: Story = {
+  name: 'No show download',
+  render: () => <ActionBar packageMeta={{ ...clone(packageMeta) }} showDownloadTarball={false} />,
+};
+
+export const Home: Story = {
+  name: 'No home',
+  render: () => (
+    <ActionBar packageMeta={{ ...merge(clone(packageMeta), { latest: { homepage: null } }) }} />
+  ),
+};
+
+export const Bugs: Story = {
+  name: 'No bugs',
+  render: () => (
+    <ActionBar packageMeta={{ ...merge(clone(packageMeta), { latest: { bugs: null } }) }} />
+  ),
+};

package/src/components/Author/Author.stories.tsx

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

package/src/components/CopyClipboard/CopyToClipBoard.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import CopyToClipBoard from './CopyToClipBoard';
 
 export default {
-  title: 'CopyToClipBoard',
+  title: 'Components/Sidebar/CopyToClipBoard',
   component: CopyToClipBoard,
   argTypes: {
     backgroundColor: { control: 'color' },

package/src/components/CopyClipboard/CopyToClipBoard.tsx

@@ -34,12 +34,12 @@ function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props)
       <Content>{children ?? text}</Content>
       {title ? (
         <Tooltip disableFocusListener={true} title={title}>
-          <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="large">
+          <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="small">
             <FileCopy fontSize="small" />
           </IconButton>
         </Tooltip>
       ) : (
-        <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="large">
+        <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="small">
           <FileCopy fontSize="small" />
         </IconButton>
       )}

package/src/components/Dependencies/Dependencies.stories.tsx

@@ -1,58 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { default as Dependencies } from '.';
 
-export default {
-  title: 'Dependencies  ',
+const meta: Meta<typeof Dependencies> = {
+  title: 'Components/Detail/Dependencies',
+  component: Dependencies,
 };
 
-export const DeprecatedAll: any = () => (
-  <Dependencies
-    packageMeta={{
-      latest: {
-        name: 'verdaccio',
-        version: '4.0.0',
-        author: {
-          name: 'verdaccio user',
-          email: 'verdaccio.user@verdaccio.org',
-          url: '',
-          avatar: 'https://www.gravatar.com/avatar/000000',
-        },
-        dist: { fileCount: 0, unpackedSize: 0 },
-        dependencies: {
-          react: '16.9.0',
-          'react-dom': '16.9.0',
-        },
-        devDependencies: {
-          'babel-core': '7.0.0-beta6',
-        },
-        peerDependencies: {
-          'styled-components': '5.0.0',
-        },
-      },
-      _uplinks: {},
-    }}
-  />
-);
+export default meta;
+type Story = StoryObj<typeof Dependencies>;
 
-export const NoDependencies: any = () => (
-  <Dependencies
-    packageMeta={{
-      latest: {
-        name: 'verdaccio',
-        version: '4.0.0',
-        author: {
-          name: 'verdaccio user',
-          email: 'verdaccio.user@verdaccio.org',
-          url: '',
-          avatar: 'https://www.gravatar.com/avatar/000000',
-        },
-        dist: { fileCount: 0, unpackedSize: 0 },
-        dependencies: {},
-        devDependencies: {},
-        peerDependencies: {},
-      },
-      _uplinks: {},
-    }}
-  />
-);
+const packageMeta = {
+  latest: {
+    name: 'verdaccio',
+    version: '4.0.0',
+    author: {
+      name: 'verdaccio user',
+      email: 'verdaccio.user@verdaccio.org',
+      url: '',
+      avatar: 'https://www.gravatar.com/avatar/000000',
+    },
+    dist: { fileCount: 0, unpackedSize: 0 },
+    dependencies: {
+      react: '16.9.0',
+      'react-dom': '16.9.0',
+      '@storybook/codemod': '^3.2.6',
+      chalk: '^2.1.0',
+      'child-process-promise': '^2.2.1',
+      commander: '^2.11.0',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+    devDependencies: {
+      'babel-core': '7.0.0-beta6',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+    peerDependencies: {
+      'styled-components': '5.0.0',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+    optionalDependencies: {
+      'styled-components': '5.0.0',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+    bundleDependencies: {
+      'styled-components': '5.0.0',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+  },
+  _uplinks: {},
+};
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => {
+    return <Dependencies packageMeta={packageMeta} />;
+  },
+};
+
+export const OnlyDeps: Story = {
+  name: 'Only dependencies',
+  render: () => {
+    return (
+      <Dependencies
+        packageMeta={{
+          latest: {
+            name: 'verdaccio',
+            version: '4.0.0',
+            author: {
+              name: 'verdaccio user',
+              email: 'verdaccio.user@verdaccio.org',
+              url: '',
+              avatar: 'https://www.gravatar.com/avatar/000000',
+            },
+            dist: { fileCount: 0, unpackedSize: 0 },
+            dependencies: {
+              'styled-components': '5.0.0',
+              'cross-spawn': '^5.0.1',
+              jscodeshift: '^0.3.30',
+              json5: '^0.5.1',
+              'latest-version': '^3.1.0',
+              'merge-dirs': '^0.2.1',
+              opencollective: '^1.0.3',
+              shelljs: '^0.7.8',
+              'update-notifier': '^2.1.0',
+            },
+            devDependencies: { jscodeshift: '^0.3.30', json5: '^0.5.1' },
+            peerDependencies: {},
+          },
+          _uplinks: {},
+        }}
+      />
+    );
+  },
+};
+
+export const NoDependencies: Story = {
+  name: 'No dependencies',
+  render: () => {
+    return (
+      <Dependencies
+        packageMeta={{
+          latest: {
+            name: 'verdaccio',
+            version: '4.0.0',
+            author: {
+              name: 'verdaccio user',
+              email: 'verdaccio.user@verdaccio.org',
+              url: '',
+              avatar: 'https://www.gravatar.com/avatar/000000',
+            },
+            dist: { fileCount: 0, unpackedSize: 0 },
+            dependencies: {},
+            devDependencies: {},
+            peerDependencies: {},
+          },
+          _uplinks: {},
+        }}
+      />
+    );
+  },
+};

package/src/components/Dependencies/Dependencies.tsx

@@ -1,4 +1,6 @@
+import Box from '@mui/material/Box';
 import CardContent from '@mui/material/CardContent';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
@@ -10,44 +12,38 @@ import { CardWrap, StyledText, Tag, Tags } from './styles';
 interface DependencyBlockProps {
   title: string;
   dependencies: PackageDependencies;
-  enableLoading?: () => void;
 }
 
-const DependencyBlock: React.FC<DependencyBlockProps> = ({
-  title,
-  dependencies,
-  enableLoading,
-}) => {
+const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
   const history = useHistory();
   const { t } = useTranslation();
+  const theme = useTheme();
 
   const deps = Object.entries(dependencies);
 
   function handleClick(name: string): void {
-    enableLoading?.();
-
     history.push(`/-/web/detail/${name}`);
   }
 
   return (
-    <CardWrap data-testid={title}>
-      <CardContent>
-        <StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
-        <Tags>
-          {deps.map(([name, version]) => (
-            <Tag
-              className={'dep-tag'}
-              clickable={true}
-              data-testid={name}
-              key={name}
-              label={t('dependencies.dependency-block', { package: name, version })}
-              // eslint-disable-next-line
-              onClick={() => handleClick(name)}
-            />
-          ))}
-        </Tags>
-      </CardContent>
-    </CardWrap>
+    <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
+      <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
+        {`${title} (${deps.length})`}
+      </StyledText>
+      <Tags>
+        {deps.map(([name, version]) => (
+          <Tag
+            className={'dep-tag'}
+            clickable={true}
+            data-testid={name}
+            key={name}
+            label={t('dependencies.dependency-block', { package: name, version })}
+            // eslint-disable-next-line
+            onClick={() => handleClick(name)}
+          />
+        ))}
+      </Tags>
+    </Box>
   );
 };
 
@@ -65,37 +61,51 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { latest } = packageMeta;
   // FIXME: add dependencies to package meta type
   // @ts-ignore
-  const { dependencies, devDependencies, peerDependencies, name } = latest;
-  const dependencyMap = { dependencies, devDependencies, peerDependencies };
+  const {
+    dependencies,
+    devDependencies,
+    peerDependencies,
+    optionalDependencies,
+    bundleDependencies,
+    name,
+  } = latest;
+  const dependencyMap = {
+    dependencies,
+    devDependencies,
+    peerDependencies,
+    bundleDependencies,
+    optionalDependencies,
+  };
   const hasDependencies =
-    hasKeys(dependencies) || hasKeys(devDependencies) || hasKeys(peerDependencies);
-
+    hasKeys(dependencies) ||
+    hasKeys(bundleDependencies) ||
+    hasKeys(optionalDependencies) ||
+    hasKeys(devDependencies) ||
+    hasKeys(peerDependencies);
   if (hasDependencies) {
     return (
-      <>
-        {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
-          if (!dependencies || Object.keys(dependencies).length === 0) {
-            return null;
-          }
-
-          return (
-            <DependencyBlock
-              dependencies={dependencies}
-              key={dependencyType}
-              title={dependencyType}
-            />
-          );
-        })}
-      </>
+      <CardWrap>
+        <CardContent>
+          {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
+            if (!dependencies || Object.keys(dependencies).length === 0) {
+              return null;
+            }
+            return (
+              <>
+                <DependencyBlock
+                  dependencies={dependencies}
+                  key={dependencyType}
+                  title={dependencyType}
+                />
+              </>
+            );
+          })}
+        </CardContent>
+      </CardWrap>
     );
   }
 
-  return (
-    <NoItems
-      className="no-dependencies"
-      text={t('dependencies.has-no-dependencies', { package: name })}
-    />
-  );
+  return <NoItems text={t('dependencies.has-no-dependencies', { package: name })} />;
 };
 
 export default Dependencies;

package/src/components/Deprecated/Deprecated.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { default as Deprecated } from '.';
 
 export default {
-  title: 'Deprecated',
+  title: 'Components/Detail/Deprecated',
 };
 
 export const DeprecatedAll: any = () => <Deprecated message="this is deprecated" />;

package/src/components/Developers/Developers.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { DeveloperType, default as Developers } from '.';
 
 export default {
-  title: 'Developers',
+  title: 'Components/Sidebar/Developers',
 };
 
 export const DevelopersAll: any = () => (