@verdaccio/ui-theme 6.0.0-6-next.9 → 6.0.0-6-next.13

package/src/pages/Version/DetailSidebar/Dist/styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 import Chip from 'verdaccio-ui/components/Chip';
 import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
 import ListItem from 'verdaccio-ui/components/ListItem';
@@ -14,11 +13,13 @@ export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
 export const DistListItem = styled(ListItem)({
   paddingLeft: 0,
   paddingRight: 0,
+  flexWrap: 'wrap',
 });
 
 export const DistChips = styled(Chip)({
   marginRight: 5,
   textTransform: 'capitalize',
+  marginTop: 5,
 });
 
 export const DownloadButton = styled(FloatingActionButton)<{ theme?: Theme }>((props) => ({

package/src/pages/Version/DetailSidebar/Engines/Engines.test.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-
-import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+import { cleanup, render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { PackageMetaInterface } from '../../../../../types/packageMeta';
 import { DetailContext } from '../../context';
-
 import Engine from './Engines';
 
 jest.mock('./img/node.png', () => '');

package/src/pages/Version/DetailSidebar/Engines/Engines.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Avatar from 'verdaccio-ui/components/Avatar';
 import Grid from 'verdaccio-ui/components/Grid';
 import List from 'verdaccio-ui/components/List';
@@ -8,9 +7,8 @@ import ListItemText from 'verdaccio-ui/components/ListItemText';
 
 import { DetailContext } from '../../context';
 import npm from '../Install/img/npm.svg';
-
 import node from './img/node.png';
-import { StyledText, EngineListItem } from './styles';
+import { EngineListItem, StyledText } from './styles';
 
 const Engine: React.FC = () => {
   const { packageMeta } = useContext(DetailContext);

package/src/pages/Version/DetailSidebar/Engines/styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 import ListItem from 'verdaccio-ui/components/ListItem';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';

package/src/pages/Version/DetailSidebar/Install/Install.test.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-
 import { render, screen } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContext } from '../../context';
 import { DetailContextProps } from '../../version-config';
-
-import data from './__partials__/data.json';
 import Install from './Install';
+import data from './__partials__/data.json';
 
 const detailContextValue: Partial<DetailContextProps> = {
   packageName: 'foo',

package/src/pages/Version/DetailSidebar/Install/Install.tsx

@@ -1,14 +1,12 @@
 import styled from '@emotion/styled';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import List from 'verdaccio-ui/components/List';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { useConfig } from 'verdaccio-ui/providers/config';
 
 import { DetailContext } from '../..';
-
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
 const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({

package/src/pages/Version/DetailSidebar/Install/InstallListItem.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Avatar from 'verdaccio-ui/components/Avatar';
 import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
 import ListItem from 'verdaccio-ui/components/ListItem';

package/src/pages/Version/DetailSidebar/Repository/Repository.test.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContext } from '../../context';
 import { DetailContextProps } from '../../version-config';
-
-import data from './__partials__/data.json';
 import Repository from './Repository';
+import data from './__partials__/data.json';
 
 const detailContextValue: DetailContextProps = {
   packageName: 'foo',

package/src/pages/Version/DetailSidebar/Repository/Repository.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Avatar from 'verdaccio-ui/components/Avatar';
 import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
 import Link from 'verdaccio-ui/components/Link';
@@ -13,7 +12,6 @@ import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { isURL } from 'verdaccio-ui/utils/url';
 
 import { DetailContext } from '../../context';
-
 import git from './img/git.png';
 
 const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
@@ -22,7 +20,7 @@ const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
 }));
 
 const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
   ':hover': {
     color: theme?.palette.dodgerBlue,
   },

package/src/pages/Version/Version.test.tsx

@@ -1,14 +1,12 @@
 import { waitFor } from '@testing-library/dom';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
-import translationEN from '../../../i18n/translations/en-US.json';
-
+import translationEN from '../../i18n/crowdin/ui.json';
+import Version from './Version';
 import data from './__partials__/data.json';
 import { DetailContext } from './context';
-import Version from './Version';
 
 // :-) we mock this otherways fails on render, some weird issue on material-ui
 jest.mock('verdaccio-ui/components/Avatar');
@@ -23,7 +21,7 @@ const detailContextValue = {
   version: '1.0.0',
 };
 
-describe('test Version page', () => {
+describe.skip('test Version page', () => {
   test('should render the version page', async () => {
     const { getByTestId, getByText } = render(
       <MemoryRouter>

package/src/pages/Version/Version.tsx

@@ -1,20 +1,35 @@
-import React, { useContext } from 'react';
-
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import Loading from 'verdaccio-ui/components/Loading';
 import NotFound from 'verdaccio-ui/components/NotFound';
 
-import { DetailContext } from './context';
+import { Dispatch, RootState } from '../../store/store';
 import VersionLayout from './VersionLayout';
+import getRouterPackageName from './get-route-package-name';
+
+interface Params {
+  scope?: string;
+  package: string;
+  version?: string;
+}
 
 const Version: React.FC = () => {
-  const detailContext = useContext(DetailContext);
-  const { isLoading, hasNotBeenFound } = detailContext;
+  const { version: packageVersion, package: pkgName, scope } = useParams<Params>();
+  const manifestStore = useSelector((state: RootState) => state.manifest);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+  const dispatch = useDispatch<Dispatch>();
+
+  useEffect(() => {
+    const packageName = getRouterPackageName(pkgName, scope);
+    dispatch.manifest.getManifest({ packageName, packageVersion });
+  }, [dispatch, pkgName, scope, packageVersion]);
 
   if (isLoading) {
     return <Loading />;
   }
 
-  if (hasNotBeenFound) {
+  if (manifestStore.hasNotBeenFound) {
     return <NotFound />;
   }
 

package/src/pages/Version/VersionContextProvider.tsx

@@ -1,12 +1,10 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { PackageMetaInterface } from 'types/packageMeta';
-
-import { useAPI } from 'verdaccio-ui/providers/API/APIProvider';
 
+import { Dispatch, RootState } from '../../store/store';
 import { DetailContext } from './context';
 import getRouterPackageName from './get-route-package-name';
-import isPackageVersionValid from './is-package-version-valid';
 
 interface Params {
   scope?: string;
@@ -15,52 +13,23 @@ interface Params {
 }
 
 const VersionContextProvider: React.FC = ({ children }) => {
-  const { version, package: pkgName, scope } = useParams<Params>();
-  const [packageName, setPackageName] = useState(getRouterPackageName(pkgName, scope));
-  const [packageVersion, setPackageVersion] = useState(version);
-  const [packageMeta, setPackageMeta] = useState<PackageMetaInterface>();
-  const [readMe, setReadme] = useState<string>();
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [hasNotBeenFound, setHasNotBeenFound] = useState<boolean>();
-  const { callDetailPage, callReadme } = useAPI();
-
-  useEffect(() => {
-    const updatedPackageName = getRouterPackageName(pkgName, scope);
-    setPackageName(updatedPackageName);
-  }, [pkgName, scope]);
-
-  useEffect(() => {
-    setPackageVersion(version);
-  }, [version]);
-
-  const doCalls = useCallback(async () => {
-    try {
-      const packageMeta = await callDetailPage(packageName, packageVersion);
-      const readMe = await callReadme(packageName, packageVersion);
-      if (isPackageVersionValid(packageMeta, packageVersion)) {
-        setReadme(readMe);
-        setPackageMeta(packageMeta);
-        setIsLoading(false);
-      } else {
-        setIsLoading(false);
-        setHasNotBeenFound(true);
-      }
-    } catch (error: any) {
-      setHasNotBeenFound(true);
-      setIsLoading(false);
-    }
-  }, [packageName, packageVersion, callDetailPage, callReadme]);
-
+  const { version: packageVersion, package: pkgName, scope } = useParams<Params>();
+  const { manifest, readme, packageName, hasNotBeenFound } = useSelector(
+    (state: RootState) => state.manifest
+  );
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+  const dispatch = useDispatch<Dispatch>();
   useEffect(() => {
-    doCalls();
-  }, [doCalls]);
+    const packageName = getRouterPackageName(pkgName, scope);
+    dispatch.manifest.getManifest({ packageName, packageVersion });
+  }, [dispatch, packageVersion, pkgName, scope]);
 
   return (
     <DetailContext.Provider
       value={{
-        packageMeta,
+        packageMeta: manifest,
         packageVersion,
-        readMe,
+        readMe: readme,
         packageName,
         isLoading,
         hasNotBeenFound,

package/src/pages/Version/VersionLayout.tsx

@@ -1,4 +1,4 @@
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import React from 'react';
 
 import DetailContainer from './DetailContainer';

package/src/pages/Version/context.ts

@@ -1,4 +1,4 @@
-import { createContext, Consumer, Provider } from 'react';
+import { Consumer, Provider, createContext } from 'react';
 
 import { DetailContextProps, VersionPageConsumerProps } from './version-config';
 

package/src/pages/home/Home.tsx

@@ -1,36 +1,17 @@
-import React, { useEffect, useState, useCallback } from 'react';
-
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import Loading from 'verdaccio-ui/components/Loading';
-import { useAPI } from 'verdaccio-ui/providers/API/APIProvider';
 
+import { Dispatch, RootState } from '../../store/store';
 import { PackageList } from './PackageList';
 
-interface Props {
-  isUserLoggedIn: boolean;
-}
-
-const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
-  const [packages, setPackages] = useState([]);
-  const { getPackages } = useAPI();
-  const [isLoading, setIsLoading] = useState(true);
-  const loadPackages = useCallback(async () => {
-    try {
-      const packages = await getPackages();
-      // FIXME add correct type for package
-      setPackages(packages as never[]);
-    } catch (error: any) {
-      // FIXME: add dialog
-      // eslint-disable-next-line no-console
-      console.error({
-        title: 'Warning',
-        message: `Unable to load package list: ${error.message}`,
-      });
-    }
-    setIsLoading(false);
-  }, [getPackages]);
+const Home: React.FC = () => {
+  const packages = useSelector((state: RootState) => state.packages.response);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.packages);
+  const dispatch = useDispatch<Dispatch>();
   useEffect(() => {
-    loadPackages().then();
-  }, [isUserLoggedIn, loadPackages]);
+    dispatch.packages.getPackages();
+  }, [dispatch]);
 
   return (
     <div className="container content" data-testid="home-page-container">

package/src/pages/home/PackageList/Help/Help.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import Help from './Help';

package/src/pages/home/PackageList/Help/Help.tsx

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Button from 'verdaccio-ui/components/Button';
 import CardActions from 'verdaccio-ui/components/CardActions';
 import CardContent from 'verdaccio-ui/components/CardContent';