@verdaccio/ui-components 2.0.0-6-next.4 → 2.0.0-6-next.6

package/src/components/Search/__snapshots__/Search.test.tsx.snap

@@ -0,0 +1,473 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Search /> component should load the component in default state 1`] = `
+.emotion-0 {
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.emotion-2 {
+  width: 100%;
+}
+
+.emotion-2.Mui-focused .MuiAutocomplete-clearIndicator {
+  visibility: visible;
+}
+
+@media (pointer: fine) {
+  .emotion-2:hover .MuiAutocomplete-clearIndicator {
+    visibility: visible;
+  }
+}
+
+.emotion-2 .MuiAutocomplete-tag {
+  margin: 3px;
+  max-width: calc(100% - 6px);
+}
+
+.emotion-2 .MuiAutocomplete-inputRoot {
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.MuiAutocomplete-hasPopupIcon.emotion-2 .MuiAutocomplete-inputRoot,
+.MuiAutocomplete-hasClearIcon.emotion-2 .MuiAutocomplete-inputRoot {
+  padding-right: 30px;
+}
+
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-2 .MuiAutocomplete-inputRoot {
+  padding-right: 56px;
+}
+
+.emotion-2 .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
+  width: 0;
+  min-width: 30px;
+}
+
+.emotion-2 .MuiInput-root {
+  padding-bottom: 1px;
+}
+
+.emotion-2 .MuiInput-root .MuiInput-input {
+  padding: 4px 4px 4px 0px;
+}
+
+.emotion-2 .MuiInput-root.MuiInputBase-sizeSmall .MuiInput-input {
+  padding: 2px 4px 3px 0;
+}
+
+.emotion-2 .MuiOutlinedInput-root {
+  padding: 9px;
+}
+
+.MuiAutocomplete-hasPopupIcon.emotion-2 .MuiOutlinedInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-2 .MuiOutlinedInput-root {
+  padding-right: 39px;
+}
+
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-2 .MuiOutlinedInput-root {
+  padding-right: 65px;
+}
+
+.emotion-2 .MuiOutlinedInput-root .MuiAutocomplete-input {
+  padding: 7.5px 4px 7.5px 6px;
+}
+
+.emotion-2 .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
+  right: 9px;
+}
+
+.emotion-2 .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 6px;
+}
+
+.emotion-2 .MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+  padding: 2.5px 4px 2.5px 6px;
+}
+
+.emotion-2 .MuiFilledInput-root {
+  padding-top: 19px;
+  padding-left: 8px;
+}
+
+.MuiAutocomplete-hasPopupIcon.emotion-2 .MuiFilledInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-2 .MuiFilledInput-root {
+  padding-right: 39px;
+}
+
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-2 .MuiFilledInput-root {
+  padding-right: 65px;
+}
+
+.emotion-2 .MuiFilledInput-root .MuiFilledInput-input {
+  padding: 7px 4px;
+}
+
+.emotion-2 .MuiFilledInput-root .MuiAutocomplete-endAdornment {
+  right: 9px;
+}
+
+.emotion-2 .MuiFilledInput-root.MuiInputBase-sizeSmall {
+  padding-bottom: 1px;
+}
+
+.emotion-2 .MuiFilledInput-root.MuiInputBase-sizeSmall .MuiFilledInput-input {
+  padding: 2.5px 4px;
+}
+
+.emotion-2 .MuiInputBase-hiddenLabel {
+  padding-top: 8px;
+}
+
+.emotion-2 .MuiFilledInput-root.MuiInputBase-hiddenLabel {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.emotion-2 .MuiFilledInput-root.MuiInputBase-hiddenLabel .MuiAutocomplete-input {
+  padding-top: 16px;
+  padding-bottom: 17px;
+}
+
+.emotion-2 .MuiFilledInput-root.MuiInputBase-hiddenLabel.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+  padding-top: 8px;
+  padding-bottom: 9px;
+}
+
+.emotion-2 .MuiAutocomplete-input {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  opacity: 1;
+}
+
+.emotion-4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  vertical-align: top;
+  width: 100%;
+}
+
+.emotion-4 .MuiInputBase-root:before {
+  content: '';
+  border: none;
+}
+
+.emotion-4 .MuiInputBase-root:after {
+  border-color: #fff;
+}
+
+.emotion-4 .MuiInputBase-root:hover:before {
+  content: none;
+}
+
+.emotion-4 .MuiInputBase-root:hover:after {
+  content: none;
+  -webkit-transform: scaleX(1);
+  -moz-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+@media screen and (min-width: 768px) {
+  .emotion-4 .MuiInputBase-root:hover:after {
+    content: '';
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .emotion-4 .MuiInputBase-input {
+    color: #fff;
+  }
+}
+
+.emotion-5 {
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.4375em;
+  color: rgba(0, 0, 0, 0.87);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+.emotion-5.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+label+.emotion-5 {
+  margin-top: 16px;
+}
+
+.emotion-5:after {
+  border-bottom: 2px solid #4b5e40;
+  left: 0;
+  bottom: 0;
+  content: "";
+  position: absolute;
+  right: 0;
+  -webkit-transform: scaleX(0);
+  -moz-transform: scaleX(0);
+  -ms-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  pointer-events: none;
+}
+
+.emotion-5.Mui-focused:after {
+  -webkit-transform: scaleX(1) translateX(0);
+  -moz-transform: scaleX(1) translateX(0);
+  -ms-transform: scaleX(1) translateX(0);
+  transform: scaleX(1) translateX(0);
+}
+
+.emotion-5.Mui-error:before,
+.emotion-5.Mui-error:after {
+  border-bottom-color: #d32f2f;
+}
+
+.emotion-5:before {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  left: 0;
+  bottom: 0;
+  content: "\\00a0";
+  position: absolute;
+  right: 0;
+  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  pointer-events: none;
+}
+
+.emotion-5:hover:not(.Mui-disabled, .Mui-error):before {
+  border-bottom: 2px solid rgba(0, 0, 0, 0.87);
+}
+
+@media (hover: none) {
+  .emotion-5:hover:not(.Mui-disabled, .Mui-error):before {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  }
+}
+
+.emotion-5.Mui-disabled:before {
+  border-bottom-style: dotted;
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 0.01em;
+  max-height: 2em;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.54);
+  margin-right: 8px;
+  color: #fff;
+}
+
+.emotion-8 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+}
+
+.emotion-9 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+}
+
+.emotion-9::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9:-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9:focus {
+  outline: 0;
+}
+
+.emotion-9:invalid {
+  box-shadow: none;
+}
+
+.emotion-9::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus:-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-9.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-9:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+<div
+  class="emotion-0 emotion-1"
+>
+  <div
+    class="MuiAutocomplete-root MuiAutocomplete-fullWidth emotion-2"
+  >
+    <div
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-3 emotion-4"
+    >
+      <div
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiAutocomplete-inputRoot emotion-5"
+      >
+        <div
+          class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-6 emotion-7"
+        >
+          <span
+            class="notranslate"
+          >
+            ​
+          </span>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-8"
+            data-testid="SearchIcon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+            />
+          </svg>
+        </div>
+        <input
+          aria-autocomplete="list"
+          aria-expanded="false"
+          aria-invalid="false"
+          autocapitalize="none"
+          autocomplete="off"
+          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-9"
+          id="search-header-suggest"
+          placeholder="search.packages"
+          role="combobox"
+          spellcheck="false"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Search/index.ts

@@ -0,0 +1 @@
+export { default } from './Search';

package/src/components/Search/styles.ts

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+import InputAdornment from '@mui/material/InputAdornment';
+
+import { TextField, Theme } from '../../';
+
+export interface InputFieldProps {
+  color: string;
+}
+
+export const StyledTextField = styled(TextField)<{ theme?: Theme }>((props) => ({
+  '& .MuiInputBase-root': {
+    ':before': {
+      content: "''",
+      border: 'none',
+    },
+    ':after': {
+      borderColor: props.theme?.palette.white,
+    },
+    ':hover:before': {
+      content: 'none',
+    },
+    ':hover:after': {
+      content: 'none',
+      transform: 'scaleX(1)',
+    },
+    [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
+      ':hover:after': {
+        content: "''",
+      },
+    },
+  },
+  '& .MuiInputBase-input': {
+    [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
+      color: props.theme?.palette.white,
+    },
+  },
+}));
+
+export const StyledInputAdornment = styled(InputAdornment)<{ theme?: Theme }>((props) => ({
+  color: props.theme?.palette.white,
+}));

package/src/components/SideBarTittle/SideBarTittle.tsx

@@ -0,0 +1,81 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme } from '../../Theme';
+import Heading from '../Heading';
+import { CommonJS, ES6Modules, TypeScript } from '../Icons';
+import { formatDate, formatDateDistance } from './utils';
+
+export type ModuleType = 'commonjs' | 'module';
+
+interface Props {
+  packageName: string;
+  description?: string;
+  version: string;
+  isLatest: boolean;
+  hasTypes?: boolean;
+  moduleType: ModuleType | void;
+  time: string;
+}
+
+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,
+  time,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
+      <StyledHeading>
+        <TitleWrapper>
+          <>
+            {packageName}
+            {hasTypes && <TypeScript />}
+            <ModuleJS module={moduleType} />
+          </>
+        </TitleWrapper>
+      </StyledHeading>
+      {description && <div>{description}</div>}
+      <StyledBoxVersion title={formatDate(time)}>
+        {isLatest
+          ? t('sidebar.detail.latest-version', { version })
+          : t('sidebar.detail.version', { version })}
+        {time
+          ? ' - ' + t('sidebar.detail.published') + ' ' + formatDateDistance(time)
+          : t('versions.not-available')}
+      </StyledBoxVersion>
+    </Box>
+  );
+};
+
+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?.palette.text.secondary,
+}));

package/src/components/SideBarTittle/index.ts

@@ -0,0 +1 @@
+export { default } from './SideBarTittle';

package/src/components/SideBarTittle/utils.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+
+export const TIMEFORMAT = 'L LTS';
+
+export function formatDate(lastUpdate: string | number): string {
+  return dayjs(new Date(lastUpdate)).format(TIMEFORMAT);
+}
+
+export function formatDateDistance(lastUpdate: Date | string | number): string {
+  // @ts-ignore
+  return dayjs(new Date(lastUpdate)).fromNow();
+}

package/src/components/TextField/TextField.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import TextField from './TextField';
+
+describe('<TextField /> component', () => {
+  const props = {
+    name: 'test',
+    value: 'test',
+  };
+  test('should load the component in default state', () => {
+    const { container } = render(<TextField name={props.name} value={props.value} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable verdaccio/jsx-spread */
+import { default as MaterialUITextField, TextFieldProps } from '@mui/material/TextField';
+import React, { forwardRef } from 'react';
+
+// The default element type of MUI's TextField is 'div'
+type TextFieldRef = HTMLDivElement;
+
+const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField(
+  { InputProps, classes, ...props },
+  ref
+) {
+  return (
+    <MaterialUITextField
+      {...props}
+      InputProps={{
+        ...InputProps,
+        classes,
+      }}
+      ref={ref}
+    />
+  );
+});
+
+export default TextField;