@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next.1

package/src/components/Repository/index.ts

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

package/src/components/Search/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable verdaccio/jsx-spread */
+import Autocomplete from '@mui/material/Autocomplete';
+import React, { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SearchResultWeb } from '@verdaccio/types';
+
+import { Wrapper } from './styles';
+
+export type OnSelecItem = (
+  event: React.SyntheticEvent,
+  value: SearchResultWeb,
+  reason: string,
+  details?: string
+) => void;
+interface Props {
+  suggestions: SearchResultWeb[];
+  suggestionsLoading: boolean;
+  placeholder: string;
+  renderOption?: (props: any, option: any) => JSX.Element;
+  renderInput: (params: any) => JSX.Element;
+  onSuggestionsFetch: any;
+  getOptionLabel: (option: any) => any;
+  onCleanSuggestions: (event: React.SyntheticEvent) => void;
+  onSelectItem: OnSelecItem;
+}
+
+const AutoComplete: FC<Props> = ({
+  suggestions,
+  onSuggestionsFetch,
+  onCleanSuggestions,
+  renderInput,
+  renderOption,
+  getOptionLabel,
+  onSelectItem,
+  suggestionsLoading = false,
+}: Props) => {
+  const { t } = useTranslation();
+  const [inputValue, setInputValue] = useState('');
+
+  const handleOnInputChange = (event: React.SyntheticEvent, value: string, reason: string) => {
+    if (reason === 'input') {
+      event.preventDefault();
+      onSuggestionsFetch({ value });
+      setInputValue(value);
+    } else if (reason === 'clear') {
+      onCleanSuggestions(event);
+      setInputValue('');
+    }
+  };
+
+  const handleOnClose = (event) => {
+    onCleanSuggestions(event);
+    setInputValue('');
+  };
+
+  // @ts-ignore
+  return (
+    <Wrapper>
+      <Autocomplete
+        /* @ts-ignore */
+        clearOnBlur={true}
+        disablePortal={true}
+        freeSolo={true}
+        fullWidth={true}
+        getOptionLabel={getOptionLabel}
+        id="search-header-suggest"
+        inputValue={inputValue}
+        loading={suggestionsLoading}
+        loadingText={t('autoComplete.loading')}
+        onChange={onSelectItem}
+        onClose={handleOnClose}
+        onInputChange={handleOnInputChange}
+        options={suggestions}
+        renderInput={renderInput}
+        renderOption={renderOption}
+        renderTags={() => null}
+      />
+    </Wrapper>
+  );
+};
+
+export default AutoComplete;

package/src/components/Search/AutoComplete/index.ts

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

package/src/components/Search/AutoComplete/styles.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+
+import { TextField, Theme } from '../../../';
+
+export interface InputFieldProps {
+  color: string;
+}
+
+export const Wrapper = styled('div')({
+  width: '100%',
+  position: 'relative',
+  zIndex: 1,
+});
+
+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,
+    },
+  },
+}));

package/src/components/Search/Search.stories.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable verdaccio/jsx-spread */
+import Box from '@mui/material/Box';
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import Search from './Search';
+
+export default {
+  title: 'Components/Header/Search',
+};
+
+export const SearchByQuery = {
+  render: (args) => (
+    <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+      <Box
+        sx={{
+          height: 100,
+          padding: 10,
+          backgroundColor: 'primary.dark',
+          '&:hover': {
+            backgroundColor: 'primary.main',
+            opacity: [0.9, 0.8, 0.7],
+          },
+        }}
+      >
+        <Search {...args} />
+      </Box>
+    </MemoryRouter>
+  ),
+};

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { api, store } from '../../';
+import { fireEvent, renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
+import Search from './Search';
+
+jest.mock('lodash/debounce', () =>
+  jest.fn((fn) => {
+    fn.cancel = jest.fn();
+    return fn;
+  })
+);
+
+/* eslint-disable verdaccio/jsx-spread */
+const ComponentToBeRendered: React.FC = () => (
+  <Router>
+    <Search />
+  </Router>
+);
+
+describe('<Search /> component', () => {
+  beforeEach(() => {
+    jest.spyOn(api, 'request').mockImplementation(() =>
+      Promise.resolve([
+        {
+          name: 'verdaccio-ui/types',
+          version: '8.4.2',
+        },
+        {
+          name: 'verdaccio',
+          version: '4.3.5',
+        },
+      ])
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should load the component in default state', () => {
+    const { container } = renderWithStore(<ComponentToBeRendered />, store);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('handleSearch: when user type package name in search component, show suggestions', async () => {
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
+
+    const autoCompleteInput = getByPlaceholderText('search.packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+
+    expect(suggestionsElements).toHaveLength(1);
+    expect(api.request).toHaveBeenCalledTimes(1);
+  });
+
+  test('onBlur: should cancel all search requests', async () => {
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
+
+    const autoCompleteInput = getByPlaceholderText('search.packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    expect(suggestionsElements).toHaveLength(1);
+    expect(api.request).toHaveBeenCalledTimes(1);
+
+    fireEvent.blur(autoCompleteInput);
+    const listBoxElement = screen.queryAllByRole('listbox');
+    expect(listBoxElement).toHaveLength(0);
+  });
+
+  test('handleSearch: cancel all search requests when there is no value in search component with type method', async () => {
+    const { getByPlaceholderText } = renderWithStore(<ComponentToBeRendered />, store);
+
+    const autoCompleteInput = getByPlaceholderText('search.packages');
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: ' ', method: 'type' } });
+    expect(autoCompleteInput).toHaveAttribute('value', ' ');
+    const listBoxElement = screen.queryAllByRole('listbox');
+    expect(listBoxElement).toHaveLength(0);
+    expect(api.request).toHaveBeenCalledTimes(0);
+  });
+
+  test('handleSearch: when method is not type method', async () => {
+    const { getByPlaceholderText } = renderWithStore(<ComponentToBeRendered />, store);
+
+    const autoCompleteInput = getByPlaceholderText('search.packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: ' ', method: 'click' } });
+    expect(autoCompleteInput).toHaveAttribute('value', ' ');
+    const listBoxElement = screen.queryAllByRole('listbox');
+    expect(listBoxElement).toHaveLength(0);
+    expect(api.request).toHaveBeenCalledTimes(0);
+  });
+
+  test('handlePackagesClearRequested: should clear suggestions', async () => {
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
+    const autoCompleteInput = getByPlaceholderText('search.packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    expect(suggestionsElements).toHaveLength(1);
+
+    fireEvent.change(autoCompleteInput, { target: { value: ' ' } });
+    const listBoxElement = screen.queryAllByRole('listbox');
+    // // when the page redirects, the list box should be empty again
+    expect(listBoxElement).toHaveLength(0);
+    expect(api.request).toHaveBeenCalledTimes(1);
+  });
+
+  test('handleClickSearch: should change the window location on click or return key', async () => {
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
+    const autoCompleteInput = getByPlaceholderText('search.packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    // console.log('suggestionsElements', suggestionsElements);
+    expect(suggestionsElements).toHaveLength(1);
+    // click on the second suggestion
+    fireEvent.click(suggestionsElements[0]);
+    const listBoxElement = screen.queryAllByRole('listbox');
+    // // when the page redirects, the list box should be empty again
+    expect(listBoxElement).toHaveLength(0);
+  });
+});

package/src/components/Search/Search.tsx

@@ -0,0 +1,162 @@
+/* eslint-disable verdaccio/jsx-spread */
+import SearchMui from '@mui/icons-material/Search';
+import debounce from 'lodash/debounce';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { RouteComponentProps, withRouter } from 'react-router';
+
+import { SearchResultWeb } from '@verdaccio/types';
+
+import { Dispatch, RootState, useConfig } from '../../';
+import AutoComplete from './AutoComplete';
+import SearchItem from './SearchItem';
+import { StyledInputAdornment, StyledTextField } from './styles';
+
+const CONSTANTS = {
+  API_DELAY: 300,
+  ABORT_ERROR: 'AbortError',
+};
+
+const Search: React.FC<RouteComponentProps> = ({ history }) => {
+  const { t } = useTranslation();
+  const {
+    configOptions: { flags },
+  } = useConfig();
+  const searchRemote = flags?.searchRemote || false;
+  const { suggestions } = useSelector((state: RootState) => state.search);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.search);
+  const dispatch = useDispatch<Dispatch>();
+  /**
+   * Cancel all the requests which are in pending state.
+   */
+  const cancelAllSearchRequests = useCallback(() => {
+    dispatch.search.clearRequestQueue();
+    dispatch.search.saveSearch({ suggestions: [] });
+  }, [dispatch]);
+
+  /**
+   * As user focuses out from input, we cancel all the request from requestList
+   * and set the API state parameters to default boolean values.
+   */
+  const handleOnBlur = useCallback(
+    (event: React.SyntheticEvent) => {
+      // stops event bubbling
+      event.stopPropagation();
+      cancelAllSearchRequests();
+    },
+    [cancelAllSearchRequests]
+  );
+
+  /**
+   * When an user select any package by clicking or pressing return key.
+   */
+  const handleClickSearch = useCallback(
+    (event: React.SyntheticEvent, value: SearchResultWeb, reason: string): void => {
+      // stops event bubbling
+      event.stopPropagation();
+      switch (reason) {
+        case 'selectOption':
+          if (searchRemote) {
+            // TODO: check this part
+            // @ts-ignore
+            history.push(`/-/web/detail/${value.package.name}`);
+          } else {
+            history.push(`/-/web/detail/${value.name}`);
+          }
+          break;
+      }
+    },
+    [history, searchRemote]
+  );
+
+  /**
+   * Fetch packages from API.
+   * For AbortController see: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
+   */
+  const handleFetchPackages = useCallback(
+    ({ value }: { value: string }) => {
+      if (value?.trim() !== '') {
+        dispatch.search.clearRequestQueue();
+        dispatch.search.getSuggestions({ value });
+      }
+    },
+    [dispatch]
+  );
+
+  const renderInput = (params) => {
+    return (
+      <StyledTextField
+        {...params}
+        InputProps={{
+          ...params.InputProps,
+          startAdornment: (
+            <StyledInputAdornment position="start">
+              <SearchMui />
+            </StyledInputAdornment>
+          ),
+        }}
+        label=""
+        placeholder={t('search.packages')}
+        variant="standard"
+      />
+    );
+  };
+
+  const getOptionLabel = () => {
+    if (searchRemote) {
+      return (option) => {
+        return option?.package?.name ?? '';
+      };
+    } else {
+      return (option) => {
+        return option?.name;
+      };
+    }
+  };
+
+  const renderOption = (props, option) => {
+    if (searchRemote) {
+      const item: SearchResultWeb = option.package;
+      const isPrivate = option?.verdaccioPrivate;
+      const isCached = option?.verdaccioPkgCached;
+      const isRemote = !isCached && !isPrivate;
+      return (
+        <SearchItem
+          {...props}
+          description={item?.description}
+          isCached={isCached}
+          isPrivate={isPrivate}
+          isRemote={isRemote}
+          name={item?.name}
+          version={item?.version}
+        />
+      );
+    } else {
+      return (
+        <SearchItem
+          {...props}
+          description={option?.description}
+          name={option?.name}
+          version={option?.version}
+        />
+      );
+    }
+  };
+
+  return (
+    <AutoComplete
+      getOptionLabel={getOptionLabel()}
+      onCleanSuggestions={handleOnBlur}
+      onSelectItem={handleClickSearch}
+      onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
+      placeholder={t('search.packages')}
+      renderInput={renderInput}
+      renderOption={renderOption}
+      suggestions={suggestions}
+      suggestionsLoading={isLoading}
+    />
+  );
+};
+
+export default withRouter(Search);

package/src/components/Search/SearchItem.tsx

@@ -0,0 +1,114 @@
+/* eslint-disable verdaccio/jsx-spread */
+import styled from '@emotion/styled';
+import Cached from '@mui/icons-material/Cached';
+import HttpsIcon from '@mui/icons-material/Https';
+import SyncAlt from '@mui/icons-material/SyncAlt';
+import { Theme } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type SearchItemProps = {
+  name: string;
+  version?: string;
+  description?: string;
+  isPrivate?: boolean;
+  isCached?: boolean;
+  isRemote?: boolean;
+};
+
+const Wrapper = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+});
+
+export const Description = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'none',
+  color: theme?.palette?.greyLight2,
+  lineHeight: '1.5rem',
+  [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
+    display: 'block',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    width: '200px',
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingLeft: theme.spacing(),
+    fontSize: theme?.fontSize.ssm,
+  },
+}));
+
+const NameGroup = styled.span({
+  display: 'flex',
+  flex: '1',
+});
+
+const Name = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: '700',
+  fontSize: theme?.fontSize.sm,
+}));
+
+const Version = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  fontSize: theme?.fontSize.ssm,
+}));
+
+const SearchItem: React.FC<SearchItemProps> = ({
+  name,
+  description,
+  isPrivate = false,
+  isRemote = false,
+  isCached = false,
+  version,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const handleDelete = () => {
+    // no action assigned by default
+  };
+  return (
+    <li {...props} style={{ flexDirection: 'column' }}>
+      <Wrapper>
+        <NameGroup>
+          <Name>{name}</Name>
+          {description && <Description>{description}</Description>}
+        </NameGroup>
+        {version && <Version>{version}</Version>}
+      </Wrapper>
+      <Wrapper>
+        <Stack direction="row" spacing={1}>
+          {isPrivate && (
+            <Chip
+              color="primary"
+              deleteIcon={<HttpsIcon />}
+              label={t('search.isPrivate')}
+              onDelete={handleDelete}
+              size="small"
+            />
+          )}
+          {isRemote && !isPrivate && (
+            <Chip
+              deleteIcon={<SyncAlt />}
+              label={t('search.isRemote')}
+              onDelete={handleDelete}
+              size="small"
+              variant="outlined"
+            />
+          )}
+          {isCached && (
+            <Chip
+              deleteIcon={<Cached />}
+              label={t('search.isCached')}
+              onDelete={handleDelete}
+              size="small"
+              variant="outlined"
+            />
+          )}
+        </Stack>
+      </Wrapper>
+    </li>
+  );
+};
+
+export default SearchItem;

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,
+}));