mirror of
https://github.com/verdaccio/verdaccio.git
synced 2024-12-24 21:15:51 +01:00
feat: add icons for module and typescript support (#3015)
* feat: add icons for module and typescript support * feat: add types and package module icons on sidebar * chore: add tests * chore: restore test
This commit is contained in:
Juan Picado
GitHub
parent
64c8221d35
commit
df53f61c64
5
.changeset/kind-bears-nail.md
Normal file
5
.changeset/kind-bears-nail.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
'@verdaccio/ui-theme': patch
|
||||
---
|
||||
|
||||
feat: add types and package module icons on sidebar
|
||||
@ -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',
|
||||
|
||||
@ -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 <ImgIcon alt="commonjs" height="20" src={icon} width="20" />;
|
||||
}
|
||||
@ -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 <ImgIcon alt="es6 modules" height="20" src={icon} width="20" />;
|
||||
}
|
||||
@ -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 <ImgIcon alt="typescript" height="20" src={iconTS} width="20" />;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H36V36H0V0Z" fill="#FFD102"/>
|
||||
<path d="M9.41113 21.7109H12.2588C12.2119 22.5898 11.9717 23.3662 11.5381 24.04C11.1104 24.708 10.5156 25.2324 9.75391 25.6133C8.99219 25.9883 8.08691 26.1758 7.03809 26.1758C6.2002 26.1758 5.4502 26.0322 4.78809 25.7451C4.12598 25.458 3.56348 25.0479 3.10059 24.5146C2.64355 23.9756 2.29199 23.3281 2.0459 22.5723C1.80566 21.8105 1.68555 20.9521 1.68555 19.9971V19.2148C1.68555 18.2598 1.81152 17.4014 2.06348 16.6396C2.31543 15.8779 2.67578 15.2275 3.14453 14.6885C3.61328 14.1494 4.17578 13.7363 4.83203 13.4492C5.48828 13.1621 6.2207 13.0186 7.0293 13.0186C8.11914 13.0186 9.03906 13.2148 9.78906 13.6074C10.5391 14 11.1191 14.5391 11.5293 15.2246C11.9453 15.9102 12.1943 16.6924 12.2764 17.5713H9.41992C9.39648 17.0732 9.30273 16.6543 9.13867 16.3145C8.97461 15.9688 8.72266 15.708 8.38281 15.5322C8.04297 15.3564 7.5918 15.2686 7.0293 15.2686C6.61914 15.2686 6.25879 15.3447 5.94824 15.4971C5.64355 15.6494 5.38867 15.8867 5.18359 16.209C4.98438 16.5312 4.83496 16.9414 4.73535 17.4395C4.63574 17.9316 4.58594 18.5176 4.58594 19.1973V19.9971C4.58594 20.6709 4.62988 21.2539 4.71777 21.7461C4.80566 22.2383 4.94629 22.6455 5.13965 22.9678C5.33887 23.29 5.59375 23.5303 5.9043 23.6885C6.21484 23.8467 6.59277 23.9258 7.03809 23.9258C7.54785 23.9258 7.97266 23.8467 8.3125 23.6885C8.65234 23.5244 8.91309 23.2783 9.09473 22.9502C9.27637 22.6221 9.38184 22.209 9.41113 21.7109ZM18.9912 22.0273V13.2031H21.8389V22.0273C21.8389 22.8828 21.6455 23.6211 21.2588 24.2422C20.8779 24.8574 20.3594 25.335 19.7031 25.6748C19.0527 26.0088 18.3174 26.1758 17.4971 26.1758C16.6533 26.1758 15.9033 26.0352 15.2471 25.7539C14.5908 25.4668 14.0752 25.0303 13.7002 24.4443C13.3311 23.8525 13.1465 23.0996 13.1465 22.1855H16.0117C16.0117 22.6367 16.0674 22.9941 16.1787 23.2578C16.2959 23.5156 16.4658 23.6973 16.6885 23.8027C16.9111 23.9082 17.1807 23.9609 17.4971 23.9609C17.8018 23.9609 18.0654 23.8877 18.2881 23.7412C18.5107 23.5889 18.6836 23.3691 18.8066 23.082C18.9297 22.7891 18.9912 22.4375 18.9912 22.0273ZM30.5752 22.625C30.5752 22.4082 30.543 22.2148 30.4785 22.0449C30.4141 21.8691 30.2969 21.708 30.127 21.5615C29.957 21.415 29.7168 21.2686 29.4062 21.1221C29.0957 20.9697 28.6885 20.8145 28.1846 20.6562C27.6104 20.4688 27.0625 20.2578 26.541 20.0234C26.0254 19.7832 25.5654 19.5049 25.1611 19.1885C24.7568 18.8721 24.4375 18.5029 24.2031 18.0811C23.9746 17.6592 23.8604 17.167 23.8604 16.6045C23.8604 16.0596 23.9805 15.5674 24.2207 15.1279C24.4609 14.6885 24.7979 14.3135 25.2314 14.0029C25.665 13.6865 26.1748 13.4463 26.7607 13.2822C27.3467 13.1123 27.9912 13.0273 28.6943 13.0273C29.6318 13.0273 30.4551 13.1943 31.1641 13.5283C31.8789 13.8564 32.4355 14.3193 32.834 14.917C33.2324 15.5088 33.4316 16.1973 33.4316 16.9824H30.584C30.584 16.6367 30.5107 16.332 30.3643 16.0684C30.2236 15.7988 30.0068 15.5879 29.7139 15.4355C29.4268 15.2832 29.0664 15.207 28.6328 15.207C28.2109 15.207 27.8564 15.2715 27.5693 15.4004C27.2881 15.5234 27.0742 15.6934 26.9277 15.9102C26.7871 16.127 26.7168 16.3643 26.7168 16.6221C26.7168 16.8271 26.7695 17.0146 26.875 17.1846C26.9863 17.3486 27.1445 17.5039 27.3496 17.6504C27.5605 17.791 27.8184 17.9258 28.123 18.0547C28.4277 18.1836 28.7764 18.3066 29.1689 18.4238C29.8545 18.6406 30.4609 18.8809 30.9883 19.1445C31.5215 19.4082 31.9697 19.707 32.333 20.041C32.6963 20.375 32.9688 20.7529 33.1504 21.1748C33.3379 21.5967 33.4316 22.0742 33.4316 22.6074C33.4316 23.1758 33.3203 23.6797 33.0977 24.1191C32.8809 24.5586 32.5645 24.9336 32.1484 25.2441C31.7383 25.5488 31.2461 25.7803 30.6719 25.9385C30.0977 26.0967 29.4561 26.1758 28.7471 26.1758C28.1025 26.1758 27.4668 26.0938 26.8398 25.9297C26.2129 25.7598 25.6445 25.502 25.1348 25.1562C24.6309 24.8105 24.2266 24.3711 23.9219 23.8379C23.623 23.2988 23.4736 22.6602 23.4736 21.9219H26.3389C26.3389 22.3086 26.3945 22.6367 26.5059 22.9062C26.6172 23.1699 26.7754 23.3838 26.9805 23.5479C27.1914 23.7119 27.4463 23.8291 27.7451 23.8994C28.0439 23.9697 28.3779 24.0049 28.7471 24.0049C29.1748 24.0049 29.5205 23.9463 29.7842 23.8291C30.0537 23.7061 30.2529 23.5391 30.3818 23.3281C30.5107 23.1172 30.5752 22.8828 30.5752 22.625Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,4 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H36V36H0V0Z" fill="#93C2DB"/>
|
||||
<path d="M11.7559 22.7852V25H4.94434V22.7852H11.7559ZM5.91992 12.2031V25H3.05469V12.2031H5.91992ZM10.877 17.3535V19.498H4.94434V17.3535H10.877ZM11.7646 12.2031V14.4268H4.94434V12.2031H11.7646ZM19.7979 21.625C19.7979 21.4082 19.7656 21.2148 19.7012 21.0449C19.6367 20.8691 19.5195 20.708 19.3496 20.5615C19.1797 20.415 18.9395 20.2686 18.6289 20.1221C18.3184 19.9697 17.9111 19.8145 17.4072 19.6562C16.833 19.4688 16.2852 19.2578 15.7637 19.0234C15.248 18.7832 14.7881 18.5049 14.3838 18.1885C13.9795 17.8721 13.6602 17.5029 13.4258 17.0811C13.1973 16.6592 13.083 16.167 13.083 15.6045C13.083 15.0596 13.2031 14.5674 13.4434 14.1279C13.6836 13.6885 14.0205 13.3135 14.4541 13.0029C14.8877 12.6865 15.3975 12.4463 15.9834 12.2822C16.5693 12.1123 17.2139 12.0273 17.917 12.0273C18.8545 12.0273 19.6777 12.1943 20.3867 12.5283C21.1016 12.8564 21.6582 13.3193 22.0566 13.917C22.4551 14.5088 22.6543 15.1973 22.6543 15.9824H19.8066C19.8066 15.6367 19.7334 15.332 19.5869 15.0684C19.4463 14.7988 19.2295 14.5879 18.9365 14.4355C18.6494 14.2832 18.2891 14.207 17.8555 14.207C17.4336 14.207 17.0791 14.2715 16.792 14.4004C16.5107 14.5234 16.2969 14.6934 16.1504 14.9102C16.0098 15.127 15.9395 15.3643 15.9395 15.6221C15.9395 15.8271 15.9922 16.0146 16.0977 16.1846C16.209 16.3486 16.3672 16.5039 16.5723 16.6504C16.7832 16.791 17.041 16.9258 17.3457 17.0547C17.6504 17.1836 17.999 17.3066 18.3916 17.4238C19.0771 17.6406 19.6836 17.8809 20.2109 18.1445C20.7441 18.4082 21.1924 18.707 21.5557 19.041C21.9189 19.375 22.1914 19.7529 22.373 20.1748C22.5605 20.5967 22.6543 21.0742 22.6543 21.6074C22.6543 22.1758 22.543 22.6797 22.3203 23.1191C22.1035 23.5586 21.7871 23.9336 21.3711 24.2441C20.9609 24.5488 20.4688 24.7803 19.8945 24.9385C19.3203 25.0967 18.6787 25.1758 17.9697 25.1758C17.3252 25.1758 16.6895 25.0938 16.0625 24.9297C15.4355 24.7598 14.8672 24.502 14.3574 24.1562C13.8535 23.8105 13.4492 23.3711 13.1445 22.8379C12.8457 22.2988 12.6963 21.6602 12.6963 20.9219H15.5615C15.5615 21.3086 15.6172 21.6367 15.7285 21.9062C15.8398 22.1699 15.998 22.3838 16.2031 22.5479C16.4141 22.7119 16.6689 22.8291 16.9678 22.8994C17.2666 22.9697 17.6006 23.0049 17.9697 23.0049C18.3975 23.0049 18.7432 22.9463 19.0068 22.8291C19.2764 22.7061 19.4756 22.5391 19.6045 22.3281C19.7334 22.1172 19.7979 21.8828 19.7979 21.625ZM30.7227 12.0449H31.1445V14.2246H30.9863C30.3711 14.2246 29.8086 14.3125 29.2988 14.4883C28.7949 14.6641 28.3584 14.9248 27.9893 15.2705C27.6201 15.6104 27.3359 16.0322 27.1367 16.5361C26.9434 17.0342 26.8467 17.6084 26.8467 18.2588V20.4385C26.8467 20.8779 26.8848 21.2617 26.9609 21.5898C27.043 21.9121 27.1602 22.1816 27.3125 22.3984C27.4707 22.6094 27.6611 22.7705 27.8838 22.8818C28.1064 22.9873 28.3584 23.04 28.6396 23.04C28.8916 23.04 29.123 22.9844 29.334 22.873C29.5449 22.7617 29.7266 22.6035 29.8789 22.3984C30.0312 22.1934 30.1484 21.9561 30.2305 21.6865C30.3125 21.4111 30.3535 21.1123 30.3535 20.79C30.3535 20.4502 30.3096 20.1426 30.2217 19.8672C30.1396 19.5859 30.0195 19.3457 29.8613 19.1465C29.709 18.9473 29.5215 18.7949 29.2988 18.6895C29.0762 18.5781 28.8301 18.5225 28.5605 18.5225C28.1738 18.5225 27.8398 18.6104 27.5586 18.7861C27.2773 18.9619 27.0605 19.1875 26.9082 19.4629C26.7559 19.7383 26.6768 20.0195 26.6709 20.3066L25.9414 19.7002C25.9414 19.3018 26.0205 18.9092 26.1787 18.5225C26.3428 18.1299 26.5742 17.7754 26.873 17.459C27.1719 17.1367 27.5381 16.8818 27.9717 16.6943C28.4111 16.501 28.9121 16.4043 29.4746 16.4043C30.0664 16.4043 30.5879 16.5186 31.0391 16.7471C31.4902 16.9697 31.8682 17.2803 32.1729 17.6787C32.4834 18.0771 32.7148 18.543 32.8672 19.0762C33.0254 19.6035 33.1045 20.1689 33.1045 20.7725C33.1045 21.3936 32.9961 21.9736 32.7793 22.5127C32.5684 23.0459 32.2695 23.5117 31.8828 23.9102C31.4961 24.3086 31.0332 24.6191 30.4941 24.8418C29.9609 25.0645 29.3662 25.1758 28.71 25.1758C28.0303 25.1758 27.4092 25.0557 26.8467 24.8154C26.29 24.5752 25.8037 24.2324 25.3877 23.7871C24.9775 23.3359 24.6582 22.7969 24.4297 22.1699C24.207 21.543 24.0957 20.8398 24.0957 20.0605V19.0322C24.0957 17.9658 24.2598 17.0049 24.5879 16.1494C24.9219 15.2939 25.3848 14.5615 25.9766 13.9521C26.5742 13.3369 27.2773 12.8652 28.0859 12.5371C28.8945 12.209 29.7734 12.0449 30.7227 12.0449Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@ -0,0 +1,3 @@
|
||||
export { TypeScript } from './TypeScript';
|
||||
export { CommonJS } from './CommonJS';
|
||||
export { ES6Modules } from './ES6Module';
|
||||
@ -0,0 +1,4 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H36V36H0V0Z" fill="#1976D2"/>
|
||||
<path d="M14.0137 12.2031V25H11.1572V12.2031H14.0137ZM17.9072 12.2031V14.4268H7.34277V12.2031H17.9072ZM25.8174 21.625C25.8174 21.4082 25.7852 21.2148 25.7207 21.0449C25.6562 20.8691 25.5391 20.708 25.3691 20.5615C25.1992 20.415 24.959 20.2686 24.6484 20.1221C24.3379 19.9697 23.9307 19.8145 23.4268 19.6562C22.8525 19.4688 22.3047 19.2578 21.7832 19.0234C21.2676 18.7832 20.8076 18.5049 20.4033 18.1885C19.999 17.8721 19.6797 17.5029 19.4453 17.0811C19.2168 16.6592 19.1025 16.167 19.1025 15.6045C19.1025 15.0596 19.2227 14.5674 19.4629 14.1279C19.7031 13.6885 20.04 13.3135 20.4736 13.0029C20.9072 12.6865 21.417 12.4463 22.0029 12.2822C22.5889 12.1123 23.2334 12.0273 23.9365 12.0273C24.874 12.0273 25.6973 12.1943 26.4062 12.5283C27.1211 12.8564 27.6777 13.3193 28.0762 13.917C28.4746 14.5088 28.6738 15.1973 28.6738 15.9824H25.8262C25.8262 15.6367 25.7529 15.332 25.6064 15.0684C25.4658 14.7988 25.249 14.5879 24.9561 14.4355C24.6689 14.2832 24.3086 14.207 23.875 14.207C23.4531 14.207 23.0986 14.2715 22.8115 14.4004C22.5303 14.5234 22.3164 14.6934 22.1699 14.9102C22.0293 15.127 21.959 15.3643 21.959 15.6221C21.959 15.8271 22.0117 16.0146 22.1172 16.1846C22.2285 16.3486 22.3867 16.5039 22.5918 16.6504C22.8027 16.791 23.0605 16.9258 23.3652 17.0547C23.6699 17.1836 24.0186 17.3066 24.4111 17.4238C25.0967 17.6406 25.7031 17.8809 26.2305 18.1445C26.7637 18.4082 27.2119 18.707 27.5752 19.041C27.9385 19.375 28.2109 19.7529 28.3926 20.1748C28.5801 20.5967 28.6738 21.0742 28.6738 21.6074C28.6738 22.1758 28.5625 22.6797 28.3398 23.1191C28.123 23.5586 27.8066 23.9336 27.3906 24.2441C26.9805 24.5488 26.4883 24.7803 25.9141 24.9385C25.3398 25.0967 24.6982 25.1758 23.9893 25.1758C23.3447 25.1758 22.709 25.0938 22.082 24.9297C21.4551 24.7598 20.8867 24.502 20.377 24.1562C19.873 23.8105 19.4688 23.3711 19.1641 22.8379C18.8652 22.2988 18.7158 21.6602 18.7158 20.9219H21.5811C21.5811 21.3086 21.6367 21.6367 21.748 21.9062C21.8594 22.1699 22.0176 22.3838 22.2227 22.5479C22.4336 22.7119 22.6885 22.8291 22.9873 22.8994C23.2861 22.9697 23.6201 23.0049 23.9893 23.0049C24.417 23.0049 24.7627 22.9463 25.0264 22.8291C25.2959 22.7061 25.4951 22.5391 25.624 22.3281C25.7529 22.1172 25.8174 21.8828 25.8174 21.625Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -3,3 +3,4 @@ export { Time } from './Time';
|
||||
export { FileBinary } from './FileBinary';
|
||||
export { Law } from './Law';
|
||||
export { Earth } from './Earth';
|
||||
export * from './DevsIcons';
|
||||
|
||||
@ -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,
|
||||
}) => (
|
||||
<DetailContext.Provider value={contextValue}>
|
||||
<DetailSidebar />
|
||||
</DetailContext.Provider>
|
||||
);
|
||||
|
||||
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(
|
||||
<ComponentToBeRendered
|
||||
contextValue={_.merge(detailContextValue, {
|
||||
packageMeta: {
|
||||
latest: {
|
||||
type: 'commonjs',
|
||||
},
|
||||
},
|
||||
})}
|
||||
/>,
|
||||
store
|
||||
);
|
||||
expect(screen.getByAltText('commonjs')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render ts module icon', () => {
|
||||
renderWithStore(
|
||||
<ComponentToBeRendered
|
||||
contextValue={_.merge(detailContextValue, {
|
||||
packageMeta: {
|
||||
latest: {
|
||||
types: './src/index.d.ts',
|
||||
},
|
||||
},
|
||||
})}
|
||||
/>,
|
||||
store
|
||||
);
|
||||
expect(screen.getByAltText('typescript')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render es6 module icon', () => {
|
||||
renderWithStore(
|
||||
<ComponentToBeRendered
|
||||
contextValue={_.merge(detailContextValue, {
|
||||
packageMeta: {
|
||||
latest: {
|
||||
type: 'module',
|
||||
},
|
||||
},
|
||||
})}
|
||||
/>,
|
||||
store
|
||||
);
|
||||
expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@ -29,7 +29,9 @@ const DetailSidebar: React.FC = () => {
|
||||
<StyledPaper className={'sidebar-info'}>
|
||||
<DetailSidebarTitle
|
||||
description={packageMeta.latest?.description}
|
||||
hasTypes={typeof packageMeta.latest.types === 'string'}
|
||||
isLatest={typeof packageVersion === 'undefined'}
|
||||
moduleType={packageMeta.latest.type}
|
||||
packageName={packageName}
|
||||
version={packageVersion || packageMeta.latest.version}
|
||||
/>
|
||||
|
||||
@ -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<Props> = ({ description, packageName, version, isLatest }) => {
|
||||
const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {
|
||||
if (module === 'commonjs') {
|
||||
return <CommonJS />;
|
||||
} else if (module === 'module') {
|
||||
return <ES6Modules />;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const DetailSidebarTitle: React.FC<Props> = ({
|
||||
description,
|
||||
packageName,
|
||||
version,
|
||||
isLatest,
|
||||
hasTypes,
|
||||
moduleType,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
|
||||
<StyledHeading>{packageName}</StyledHeading>
|
||||
<StyledHeading>
|
||||
<TitleWrapper>
|
||||
<>
|
||||
{packageName}
|
||||
{hasTypes && <TypeScript />}
|
||||
<ModuleJS module={moduleType} />
|
||||
</>
|
||||
</TitleWrapper>
|
||||
</StyledHeading>
|
||||
{description && <div>{description}</div>}
|
||||
<StyledBoxVersion>
|
||||
{isLatest
|
||||
@ -29,11 +58,16 @@ const DetailSidebarTitle: React.FC<Props> = ({ 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,
|
||||
}));
|
||||
|
||||
@ -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[];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user