diff --git a/.changeset/kind-bears-nail.md b/.changeset/kind-bears-nail.md new file mode 100644 index 000000000..ec3f7bed2 --- /dev/null +++ b/.changeset/kind-bears-nail.md @@ -0,0 +1,5 @@ +--- +'@verdaccio/ui-theme': patch +--- + +feat: add types and package module icons on sidebar diff --git a/packages/plugins/ui-theme/jest/jest.config.js b/packages/plugins/ui-theme/jest/jest.config.js index a54aed4cb..776160773 100644 --- a/packages/plugins/ui-theme/jest/jest.config.js +++ b/packages/plugins/ui-theme/jest/jest.config.js @@ -4,7 +4,7 @@ module.exports = Object.assign({}, config, { name: 'verdaccio-ui-jest', verbose: true, automock: false, - collectCoverage: true, + collectCoverage: false, testEnvironment: 'jest-environment-jsdom-global', transform: { '^.+\\.(js|ts|tsx)$': 'babel-jest', diff --git a/packages/plugins/ui-theme/src/components/Icons/DevsIcons/CommonJS.tsx b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/CommonJS.tsx new file mode 100644 index 000000000..6b0cbf9d5 --- /dev/null +++ b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/CommonJS.tsx @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; +import { Theme } from '@mui/material'; +import React from 'react'; + +import icon from './commonjs.svg'; + +const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({ + marginLeft: theme?.spacing(1), +})); + +export function CommonJS() { + return ; +} diff --git a/packages/plugins/ui-theme/src/components/Icons/DevsIcons/ES6Module.tsx b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/ES6Module.tsx new file mode 100644 index 000000000..90ac0cc22 --- /dev/null +++ b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/ES6Module.tsx @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; +import { Theme } from '@mui/material'; +import React from 'react'; + +import icon from './es6modules.svg'; + +const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({ + marginLeft: theme?.spacing(1), +})); + +export function ES6Modules() { + return ; +} diff --git a/packages/plugins/ui-theme/src/components/Icons/DevsIcons/TypeScript.tsx b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/TypeScript.tsx new file mode 100644 index 000000000..8a118c388 --- /dev/null +++ b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/TypeScript.tsx @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; +import { Theme } from '@mui/material'; +import React from 'react'; + +import iconTS from './typescript.svg'; + +const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({ + marginLeft: theme?.spacing(1), +})); + +export function TypeScript() { + return ; +} diff --git a/packages/plugins/ui-theme/src/components/Icons/DevsIcons/commonjs.svg b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/commonjs.svg new file mode 100644 index 000000000..3d0a1d8c2 --- /dev/null +++ b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/commonjs.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/plugins/ui-theme/src/components/Icons/DevsIcons/es6modules.svg b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/es6modules.svg new file mode 100644 index 000000000..2a10d7926 --- /dev/null +++ b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/es6modules.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/plugins/ui-theme/src/components/Icons/DevsIcons/index.tsx b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/index.tsx new file mode 100644 index 000000000..af5dc8a66 --- /dev/null +++ b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/index.tsx @@ -0,0 +1,3 @@ +export { TypeScript } from './TypeScript'; +export { CommonJS } from './CommonJS'; +export { ES6Modules } from './ES6Module'; diff --git a/packages/plugins/ui-theme/src/components/Icons/DevsIcons/typescript.svg b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/typescript.svg new file mode 100644 index 000000000..c9d74fd7b --- /dev/null +++ b/packages/plugins/ui-theme/src/components/Icons/DevsIcons/typescript.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/plugins/ui-theme/src/components/Icons/index.ts b/packages/plugins/ui-theme/src/components/Icons/index.ts index d39de1b2e..f76554e39 100644 --- a/packages/plugins/ui-theme/src/components/Icons/index.ts +++ b/packages/plugins/ui-theme/src/components/Icons/index.ts @@ -3,3 +3,4 @@ export { Time } from './Time'; export { FileBinary } from './FileBinary'; export { Law } from './Law'; export { Earth } from './Earth'; +export * from './DevsIcons'; diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.test.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.test.tsx new file mode 100644 index 000000000..72be7d7d7 --- /dev/null +++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.test.tsx @@ -0,0 +1,90 @@ +import _ from 'lodash'; +import React from 'react'; +import { renderWithStore, screen } from 'verdaccio-ui/utils/test-react-testing-library'; + +import { store } from '../../../store'; +import { DetailContext } from '../context'; +import { DetailContextProps } from '../version-config'; +import DetailSidebar from './DetailSidebar'; + +const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({ + contextValue, +}) => ( + + + +); + +const detailContextValue: DetailContextProps = { + packageName: 'foo', + readMe: 'test', + enableLoading: () => {}, + isLoading: false, + hasNotBeenFound: false, + 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', + }, + }, + }, +}; + +describe('DetailSidebar', () => { + test('should render commonjs module icon', () => { + renderWithStore( + , + store + ); + expect(screen.getByAltText('commonjs')).toBeInTheDocument(); + }); + + test('should render ts module icon', () => { + renderWithStore( + , + store + ); + expect(screen.getByAltText('typescript')).toBeInTheDocument(); + }); + + test('should render es6 module icon', () => { + renderWithStore( + , + store + ); + expect(screen.getByAltText('es6 modules')).toBeInTheDocument(); + }); +}); diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx index 985fef05c..e642c83bc 100644 --- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx +++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx @@ -29,7 +29,9 @@ const DetailSidebar: React.FC = () => { diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx index 5743836f4..b7892b3da 100644 --- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx +++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx @@ -1,8 +1,10 @@ import styled from '@emotion/styled'; import React from 'react'; import { useTranslation } from 'react-i18next'; +import { ModuleType } from 'types/packageMeta'; import Box from 'verdaccio-ui/components/Box'; import Heading from 'verdaccio-ui/components/Heading'; +import { CommonJS, ES6Modules, TypeScript } from 'verdaccio-ui/components/Icons'; import { Theme } from 'verdaccio-ui/design-tokens/theme'; interface Props { @@ -10,13 +12,40 @@ interface Props { description?: string; version: string; isLatest: boolean; + hasTypes?: boolean; + moduleType: ModuleType | void; } -const DetailSidebarTitle: React.FC = ({ description, packageName, version, isLatest }) => { +const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => { + if (module === 'commonjs') { + return ; + } else if (module === 'module') { + return ; + } else { + return null; + } +}; + +const DetailSidebarTitle: React.FC = ({ + description, + packageName, + version, + isLatest, + hasTypes, + moduleType, +}) => { const { t } = useTranslation(); return ( - {packageName} + + + <> + {packageName} + {hasTypes && } + + + + {description &&
{description}
} {isLatest @@ -29,11 +58,16 @@ const DetailSidebarTitle: React.FC = ({ description, packageName, version export default DetailSidebarTitle; +const TitleWrapper = styled.div({ + display: 'flex', + alignItems: 'center', +}); + const StyledHeading = styled(Heading)({ fontSize: '1rem', fontWeight: 700, }); const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({ - color: theme && theme.palette.text.secondary, + color: theme?.palette.text.secondary, })); diff --git a/packages/plugins/ui-theme/types/packageMeta.ts b/packages/plugins/ui-theme/types/packageMeta.ts index b216464c0..38031932a 100644 --- a/packages/plugins/ui-theme/types/packageMeta.ts +++ b/packages/plugins/ui-theme/types/packageMeta.ts @@ -1,3 +1,5 @@ +export type ModuleType = 'commonjs' | 'module'; + export interface PackageMetaInterface { versions?: Versions; 'dist-tags'?: DistTags; @@ -25,6 +27,9 @@ export interface PackageMetaInterface { type?: string; url?: string; }; + main?: string; + type?: ModuleType; + types?: string; description?: string; funding?: Funding; maintainers?: Developer[];