feat(ui-components): support packages with multiple module types (#5008)

.changeset/slow-cars-guess.md

@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-components': minor
+---
+
+support packages with multiple module types

packages/ui-components/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"

packages/ui-components/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>

packages/ui-components/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';
+    moduleTypes.push('commonjs');
-  } else if (manifest.latest.type) {
-    return manifest.latest.type;
   }
-  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}