- {t('sidebar.author.title')}}>
-
verdaccio user
@@ -194,6 +218,8 @@ exports[`
@@ -280,21 +324,25 @@ exports[`![verdaccio user]()
component should render the component when there is no autho
padding-bottom: 8px;
padding-left: 16px;
padding-right: 16px;
+ margin-top: 8px;
+ margin-bottom: 8px;
padding: 0;
}
@@ -597,6 +653,7 @@ exports[`
+
,
"debug": [Function],
@@ -329,10 +397,26 @@ exports[`test Developers should render the component for maintainers with items
}
.emotion-3>* {
- margin: 5px;
+ margin-right: 5px;
}
.emotion-4 {
+ margin: 0;
+ font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+ font-weight: 400;
+ font-size: 0.75rem;
+ line-height: 1.66;
+ color: #4b5e40;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4:hover {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+.emotion-5 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -362,9 +446,13 @@ exports[`test Developers should render the component for maintainers with items
user-select: none;
color: #f4f4f4;
background-color: #bdbdbd;
+ width: 40px;
+ height: 40px;
+ margin-left: 0px;
+ margin-right: 8px;
}
-.emotion-5 {
+.emotion-6 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -393,40 +481,54 @@ exports[`test Developers should render the component for maintainers with items
verdaccio user
@@ -399,6 +447,8 @@ exports[`
@@ -631,6 +689,8 @@ exports[`![verdaccio user]()
Promise.resolve()) },
+});
+
+describe('CopyToClipBoard component', () => {
+ test('should copy text to clipboard', async () => {
+ const copyThis = 'copy this';
+ render(
+ ): void => {
event.preventDefault();
- const node = document.createElement('div');
- node.innerText = str;
- if (document.body) {
- document.body.appendChild(node);
-
- const range = document.createRange();
- const selection = window.getSelection() as Selection;
- range.selectNodeContents(node);
- selection.removeAllRanges();
- selection.addRange(range);
- document.execCommand('copy');
- document.body.removeChild(node);
- }
+ // document.execCommand is deprecated
+ navigator.clipboard.writeText(str);
};
diff --git a/packages/ui-components/src/components/Dependencies/Dependencies.tsx b/packages/ui-components/src/components/Dependencies/Dependencies.tsx
index 49382ab36..232e8b9c5 100644
--- a/packages/ui-components/src/components/Dependencies/Dependencies.tsx
+++ b/packages/ui-components/src/components/Dependencies/Dependencies.tsx
@@ -1,19 +1,13 @@
-import styled from '@emotion/styled';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
-import { Theme } from '../../Theme';
import NoItems from '../NoItems';
import { DependencyBlock } from './DependencyBlock';
import { hasKeys } from './utits';
-export const CardWrap = styled(Card)<{ theme?: Theme }>((props) => ({
- marginBottom: props.theme.spacing(2),
-}));
-
const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
const { t } = useTranslation();
@@ -43,7 +37,7 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
hasKeys(peerDependencies);
if (hasDependencies) {
return (
-
+
{Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
@@ -62,11 +56,17 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
})}
-
+
);
}
- return
+
+
+
+ );
};
export default Dependencies;
diff --git a/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx b/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx
index 9ca871ecf..ebe2c9071 100644
--- a/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx
+++ b/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx
@@ -9,6 +9,7 @@ import { useHistory } from 'react-router-dom';
import { Theme } from '../../Theme';
import { PackageDependencies } from '../../types/packageMeta';
+import { Route } from '../../utils';
interface DependencyBlockProps {
title: string;
@@ -41,7 +42,7 @@ export const DependencyBlock: React.FC = ({ title, depende
const deps = Object.entries(dependencies);
function handleClick(name: string): void {
- history.push(`/-/web/detail/${name}`);
+ history.push(`${Route.DETAIL}${name}`);
}
function labelText(title: string, name: string, version: string): string {
diff --git a/packages/ui-components/src/components/Developers/DeveloperType.tsx b/packages/ui-components/src/components/Developers/DeveloperType.tsx
new file mode 100644
index 000000000..1ae0f6165
--- /dev/null
+++ b/packages/ui-components/src/components/Developers/DeveloperType.tsx
@@ -0,0 +1,4 @@
+export enum DeveloperType {
+ CONTRIBUTORS = 'contributors',
+ MAINTAINERS = 'maintainers',
+}
diff --git a/packages/ui-components/src/components/Developers/Developers.test.tsx b/packages/ui-components/src/components/Developers/Developers.test.tsx
index dfc341a91..f995522e8 100644
--- a/packages/ui-components/src/components/Developers/Developers.test.tsx
+++ b/packages/ui-components/src/components/Developers/Developers.test.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { cleanup, fireEvent, render } from '../../test/test-react-testing-library';
+import { cleanup, fireEvent, render, screen } from '../../test/test-react-testing-library';
+import { DeveloperType } from './DeveloperType';
import Developers from './Developers';
-import { DeveloperType } from './Title';
describe('test Developers', () => {
afterEach(() => {
@@ -63,7 +63,7 @@ describe('test Developers', () => {
expect(wrapper).toMatchSnapshot();
});
- test('should test onClick the component avatar', () => {
+ test('should show only up to max items', () => {
const packageMeta = {
latest: {
packageName: 'foo',
@@ -72,6 +72,7 @@ describe('test Developers', () => {
{
name: 'dmethvin',
email: 'test@gmail.com',
+ url: 'https://example.com/',
},
{
name: 'dmethvin2',
@@ -89,14 +90,40 @@ describe('test Developers', () => {
= ({ type, visibleMax = VISIBLE_MAX, packageMe
return null;
}
+ const { name: packageName, version } = packageMeta.latest;
+
return (
<>
- {visibleDevelopers.map((visibleDeveloper) => {
+ {visibleDevelopers.map((visibleDeveloper, index) => {
return (
-
-
+
+
)}
diff --git a/packages/ui-components/src/components/Developers/Title.tsx b/packages/ui-components/src/components/Developers/Title.tsx
index 2e304ba0b..f4579457c 100644
--- a/packages/ui-components/src/components/Developers/Title.tsx
+++ b/packages/ui-components/src/components/Developers/Title.tsx
@@ -4,11 +4,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { Theme } from '../../Theme';
-
-export enum DeveloperType {
- CONTRIBUTORS = 'contributors',
- MAINTAINERS = 'maintainers',
-}
+import { DeveloperType } from './';
interface Props {
type: DeveloperType;
diff --git a/packages/ui-components/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/packages/ui-components/src/components/Developers/__snapshots__/Developers.test.tsx.snap
index c7c50e1a6..1645dc7ae 100644
--- a/packages/ui-components/src/components/Developers/__snapshots__/Developers.test.tsx.snap
+++ b/packages/ui-components/src/components/Developers/__snapshots__/Developers.test.tsx.snap
@@ -26,10 +26,26 @@ exports[`test Developers should render the component for contributors with items
}
.emotion-3>* {
- margin: 5px;
+ margin-right: 5px;
}
.emotion-4 {
+ margin: 0;
+ font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+ font-weight: 400;
+ font-size: 0.75rem;
+ line-height: 1.66;
+ color: #4b5e40;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4:hover {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+.emotion-5 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -59,9 +75,13 @@ exports[`test Developers should render the component for contributors with items
user-select: none;
color: #f4f4f4;
background-color: #bdbdbd;
+ width: 40px;
+ height: 40px;
+ margin-left: 0px;
+ margin-right: 8px;
}
-.emotion-5 {
+.emotion-6 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -90,40 +110,54 @@ exports[`test Developers should render the component for contributors with items
+
-
+
+
-
-
-
+
+
-
-
-
+
+
-
-
-
+
+
-
-
-
+
+
+
,
@@ -453,10 +555,26 @@ exports[`test Developers should render the component for maintainers with items
}
.emotion-3>* {
- margin: 5px;
+ margin-right: 5px;
}
.emotion-4 {
+ margin: 0;
+ font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+ font-weight: 400;
+ font-size: 0.75rem;
+ line-height: 1.66;
+ color: #4b5e40;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4:hover {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+.emotion-5 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -486,9 +604,13 @@ exports[`test Developers should render the component for maintainers with items
user-select: none;
color: #f4f4f4;
background-color: #bdbdbd;
+ width: 40px;
+ height: 40px;
+ margin-left: 0px;
+ margin-right: 8px;
}
-.emotion-5 {
+.emotion-6 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -516,40 +638,54 @@ exports[`test Developers should render the component for maintainers with items
-
-
-
+
+
-
-
-
+
+
+
,
"debug": [Function],
diff --git a/packages/ui-components/src/components/Developers/index.ts b/packages/ui-components/src/components/Developers/index.ts
index 27846f2f9..0c70a0c17 100644
--- a/packages/ui-components/src/components/Developers/index.ts
+++ b/packages/ui-components/src/components/Developers/index.ts
@@ -1 +1,2 @@
-export { default, DeveloperType } from './Developers';
+export { default } from './Developers';
+export { DeveloperType } from './DeveloperType';
diff --git a/packages/ui-components/src/components/Developers/styles.ts b/packages/ui-components/src/components/Developers/styles.ts
deleted file mode 100644
index 1dc2b07ec..000000000
--- a/packages/ui-components/src/components/Developers/styles.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from '@emotion/styled';
-import FabMUI from '@mui/material/Fab';
-import Typography from '@mui/material/Typography';
-
-import { Theme } from '../../Theme';
-
-export const Details = styled('span')({
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
-});
-
-export const Content = styled('div')({
- margin: '10px 0 10px 0',
- display: 'flex',
- flexWrap: 'wrap',
- '> *': {
- margin: '5px',
- },
-});
-
-export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
- fontWeight: props.theme?.fontWeight.bold,
- marginBottom: '10px',
- textTransform: 'capitalize',
-}));
-
-export const Fab = styled(FabMUI)<{ theme?: Theme }>((props) => ({
- backgroundColor: props.theme?.palette.primary.main,
- color: props.theme?.palette.white,
-}));
diff --git a/packages/ui-components/src/components/Distribution/Dist.test.tsx b/packages/ui-components/src/components/Distribution/Dist.test.tsx
index 7c1a312ff..db7d68097 100644
--- a/packages/ui-components/src/components/Distribution/Dist.test.tsx
+++ b/packages/ui-components/src/components/Distribution/Dist.test.tsx
@@ -33,7 +33,7 @@ describe('
-
-
-
+
+
-
- - {title}}>
{'Test'}
+