@verdaccio/ui-components 4.0.0-next-8.3 → 4.0.0-next-8.5

package/src/components/SideBarTitle/SideBarTitle.stories.tsx

@@ -17,7 +17,7 @@ export const Commonjs: Story = {
   render: () => (
     <SideBarTittle
       isLatest={false}
-      moduleType="commonjs"
+      moduleTypes={['commonjs']}
       packageName="jquery"
       time="2012-12-31T06:54:14.275Z"
       version="1.0.0"
@@ -30,7 +30,7 @@ export const ES6: Story = {
   render: () => (
     <SideBarTittle
       isLatest={true}
-      moduleType="module"
+      moduleTypes={['module']}
       packageName="react"
       time="2012-12-31T06:54:14.275Z"
       version="14.0.0"
@@ -38,13 +38,26 @@ export const ES6: Story = {
   ),
 };
 
+export const CommonjsAndES6: Story = {
+  name: 'CommonJS and ES6 package',
+  render: () => (
+    <SideBarTittle
+      isLatest={true}
+      moduleTypes={['commonjs', 'module']}
+      packageName="jquery"
+      time="2012-12-31T06:54:14.275Z"
+      version="1.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"
+      moduleTypes={['module']}
       packageName="storybook"
       time="2012-12-31T06:54:14.275Z"
       version="14.0.0"
@@ -59,7 +72,7 @@ export const WithTypes: Story = {
       description="Storybook's CLI - easiest method of adding storybook to your projects"
       hasTypes={true}
       isLatest={true}
-      moduleType="module"
+      moduleTypes={['module']}
       packageName="storybook"
       time="2012-12-31T06:54:14.275Z"
       version="14.0.0"

package/src/components/SideBarTitle/SideBarTitle.tsx

@@ -16,7 +16,7 @@ interface Props {
   version: string;
   isLatest: boolean;
   hasTypes?: boolean;
-  moduleType: ModuleType | void;
+  moduleTypes: ModuleType[];
   time: string;
 }
 
@@ -48,7 +48,7 @@ const DetailSidebarTitle: React.FC<Props> = ({
   version,
   isLatest,
   hasTypes,
-  moduleType,
+  moduleTypes,
   time,
 }) => {
   const { t } = useTranslation();
@@ -63,7 +63,9 @@ const DetailSidebarTitle: React.FC<Props> = ({
                 <TypeScript />
               </Icon>
             )}
-            <ModuleJS module={moduleType} />
+            {moduleTypes.map((module, index) => (
+              <ModuleJS key={index} module={module} />
+            ))}
           </>
         </TitleWrapper>
       </StyledHeading>

package/src/components/Versions/HistoryList.tsx

@@ -39,7 +39,11 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
   return (
     <List dense={true}>
       {Object.keys(listVersions)
-        .reverse()
+        .sort((a, b) => {
+          const timeA = time[a] ? new Date(time[a]).getTime() : 0;
+          const timeB = time[b] ? new Date(time[b]).getTime() : 0;
+          return timeB - timeA;
+        })
         .map((version) => (
           <ListItem
             className="version-item"
@@ -48,7 +52,11 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
             sx={{ pr: 0 }}
           >
             <Link to={`${Route.DETAIL}${packageName}/v/${version}`} variant="outline">
-              <ListItemText disableTypography={false} primary={version}></ListItemText>
+              <ListItemText
+                data-testid={`version-list-link`}
+                disableTypography={false}
+                primary={version}
+              />
             </Link>
             {typeof versions[version]?.deprecated === 'string' ? (
               <Chip

package/src/components/Versions/Versions.test.tsx

@@ -7,6 +7,7 @@ import { fireEvent, render, screen } from '../../test/test-react-testing-library
 import Versions, { Props } from './Versions';
 import data from './__partials__/data.json';
 import dataDeprecated from './__partials__/deprecated-versions.json';
+import dataUnsorted from './__partials__/unsorted-versions.json';
 
 const VersionsComponent: React.FC<Props> = (props) => (
   <MemoryRouter>
@@ -68,5 +69,15 @@ describe('<Version /> component', () => {
     expect(screen.getByText('0.0.1')).toBeInTheDocument();
   });
 
+  test('should render versions sorted by timestamp in descending order', () => {
+    render(<VersionsComponent packageMeta={dataUnsorted} packageName={'dummy'} />);
+
+    const versionElements = screen.getAllByTestId('version-list-link');
+    const versions = versionElements.map((el) => el.textContent);
+
+    // Expected order based on timestamps in unsorted-versions.json:
+    expect(versions).toEqual(['1.0.1', '1.0.0', '0.1.1', '0.1.0']);
+  });
+
   test.todo('should click on version link');
 });

package/src/components/Versions/__partials__/unsorted-versions.json

@@ -0,0 +1,37 @@
+{
+  "versions": {
+    "1.0.0": {
+      "name": "dummy",
+      "version": "1.0.0"
+    },
+    "0.1.0": {
+      "name": "dummy",
+      "version": "0.1.0"
+    },
+    "0.1.1": {
+      "name": "dummy",
+      "version": "0.1.1"
+    },
+    "1.0.1": {
+      "name": "dummy",
+      "version": "1.0.1"
+    }
+  },
+  "time": {
+    "created": "2012-02-19T21:35:53.514Z",
+    "modified": "2024-11-21T06:32:43.761Z",
+    "1.0.0": "2025-01-10T14:55:23.763Z",
+    "0.1.0": "2012-02-19T21:35:54.455Z",
+    "0.1.1": "2012-02-20T06:12:03.403Z",
+    "1.0.1": "2025-01-10T15:11:36.318Z"
+  },
+  "users": {},
+  "dist-tags": {
+    "latest": "1.0.1"
+  },
+  "_id": "dummy",
+  "latest": {
+    "name": "dummy",
+    "version": "1.0.1"
+  }
+}

package/src/sections/SideBar/Sidebar.tsx

@@ -13,15 +13,18 @@ import Repository from '../../components/Repository';
 import SideBarTitle from '../../components/SideBarTitle';
 import { useConfig } from '../../providers';
 import { useVersion } from '../../providers';
-import { PackageMetaInterface } from '../../types/packageMeta';
+import { ModuleType, PackageMetaInterface } from '../../types/packageMeta';
+
+const getModuleTypes = (manifest: PackageMetaInterface) => {
+  if (!manifest.latest) return [];
+
+  const moduleTypes: ModuleType[] = [manifest.latest.type || 'commonjs'];
 
-const getModuleType = (manifest: PackageMetaInterface) => {
   if (manifest.latest.main) {
-    return 'commonjs';
-  } else if (manifest.latest.type) {
-    return manifest.latest.type;
+    moduleTypes.push('commonjs');
   }
-  return;
+
+  return Array.from(new Set(moduleTypes));
 };
 
 const DetailSidebar: React.FC = () => {
@@ -40,7 +43,7 @@ const DetailSidebar: React.FC = () => {
         description={packageMeta.latest?.description}
         hasTypes={typeof packageMeta.latest?.types === 'string'}
         isLatest={typeof packageVersion === 'undefined'}
-        moduleType={getModuleType(packageMeta)}
+        moduleTypes={getModuleTypes(packageMeta)}
         packageName={packageName}
         time={time}
         version={version}

package/src/store/api.test.ts

@@ -1,6 +1,6 @@
 import { vi } from 'vitest';
 
-import api, { handleResponseType } from './api';
+import api, { CustomError, handleResponseType } from './api';
 
 describe('api', () => {
   describe('handleResponseType', () => {
@@ -142,7 +142,9 @@ describe('api', () => {
         })
       );
 
-      await expect(api.request('/resource')).rejects.toThrow(new Error('Unknown error'));
+      const error = new CustomError('Unknown error');
+      error.code = 500;
+      await expect(api.request('/resource')).rejects.toThrow(error);
     });
 
     test('when api returns an error 5.x.x', async () => {

package/src/store/api.ts

@@ -1,6 +1,6 @@
 import storage from './storage';
 
-class CustomError extends Error {
+export class CustomError extends Error {
   // @ts-ignore
   code: number;
 }

package/src/store/models/login.test.ts

@@ -1,20 +1,24 @@
 import { vi } from 'vitest';
 
-// import { generateTokenWithTimeRange } from '../../../jest/unit/components/__mocks__/token';
+import { generateTokenWithTimeRange } from '../../utils/token-generate';
 
 describe('getDefaultUserState', (): void => {
   const username = 'xyz';
 
   beforeEach(() => {
     vi.resetModules();
+    vi.resetAllMocks();
   });
 
   test('should return state with empty user', async () => {
     const token = 'token-xx-xx-xx';
-    vi.doMock('../storage', async (importOriginal) => ({
-      ...(await importOriginal<typeof import('../storage')>()),
-      getItem: (key: string) => (key === 'token' ? token : username),
+
+    vi.doMock('../storage', () => ({
+      default: {
+        getItem: (key: string) => (key === 'token' ? token : username),
+      },
     }));
+
     const Login = await import('./login');
     const { getDefaultUserState } = Login;
     const result = {
@@ -24,19 +28,21 @@ describe('getDefaultUserState', (): void => {
     expect(getDefaultUserState()).toEqual(result);
   });
 
-  // test('should return state with user from storage', async () => {
-  //   const token = generateTokenWithTimeRange(24);
-  //
-  //   vi.doMock('../storage', async (importOriginal) => ({
-  //     ...(await importOriginal<typeof import('../storage')>()),
-  //     getItem: (key: string) => (key === 'token' ? token : username),
-  //   }));
-  //   const Login = await import('./login');
-  //   const { getDefaultUserState } = Login;
-  //   const result = {
-  //     token,
-  //     username,
-  //   };
-  //   expect(getDefaultUserState()).toEqual(result);
-  // });
+  test('should return state with user from storage', async () => {
+    const token = generateTokenWithTimeRange(24);
+
+    vi.doMock('../storage', () => ({
+      default: {
+        getItem: (key: string) => (key === 'token' ? token : username),
+      },
+    }));
+
+    const Login = await import('./login');
+    const { getDefaultUserState } = Login;
+    const result = {
+      token,
+      username,
+    };
+    expect(getDefaultUserState()).toEqual(result);
+  });
 });

package/src/utils/token.test.ts

@@ -1,13 +1,12 @@
 import { vi } from 'vitest';
 
-/* eslint-disable jest/no-mocks-import */
+import { isTokenExpire } from './token';
 import {
   generateInvalidToken,
   generateTokenWithExpirationAsString,
   generateTokenWithOutExpiration,
   generateTokenWithTimeRange,
-} from '../../vitest/unit/components/__mocks__/token';
-import { isTokenExpire } from './token';
+} from './token-generate';
 
 /* eslint-disable no-console */
 console.error = vi.fn();

package/vitest.config.mjs

@@ -22,6 +22,7 @@ export default defineConfig({
       '\\.(jpg)$': './vitest/unit/empty.ts',
       '\\.(md)$': './vitest/unit/empty-string.ts',
     },
+    testTimeout: 15000,
   },
   plugins: [
     react({