@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/components/AutoComplete/AutoCompleteV2.tsx

@@ -0,0 +1,296 @@
+import styled from '@emotion/styled';
+import { withStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import React, {
+  memo,
+  useState,
+  ChangeEvent,
+  KeyboardEvent,
+  useEffect,
+  useRef,
+  useCallback,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { useOnClickOutside } from 'verdaccio-ui/design-tokens/useOnClickOutside';
+
+import IconButton from '../IconButton';
+import MenuItem from '../MenuItem';
+import Paper from '../Paper';
+import TextField from '../TextField';
+
+import { createFilterOptions } from './useAutoComplete';
+
+const defaultFilterOptions = createFilterOptions();
+
+type TextFieldProps = React.ComponentProps<typeof TextField>;
+
+interface Props<Option extends {}> extends Pick<TextFieldProps, 'variant'> {
+  options: Option[];
+  getOptionLabel: (option: Option) => string;
+  renderOption?: (option: Option) => React.ReactNode;
+  placeholder?: string;
+  label?: React.ReactNode;
+  defaultValue?: string;
+  inputStartAdornment?: React.ReactNode;
+  hasClearIcon?: boolean;
+  className?: string;
+  onClick?: (option: any) => void;
+}
+
+const AutoComplete = <Option extends {}>({
+  placeholder,
+  defaultValue = '',
+  label,
+  variant,
+  inputStartAdornment,
+  options: suggestions,
+  getOptionLabel,
+  renderOption: renderOptionProp,
+  className,
+  onClick,
+  hasClearIcon,
+}: Props<Option>) => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState(defaultValue);
+  const [options, setOptions] = useState(suggestions);
+  const [activeOption, setActiveOption] = useState(0);
+  const [showOptions, setShowOptions] = useState(false);
+
+  // refs
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const clickOutside = useCallback(() => {
+    setShowOptions(false);
+    if (!searchTerm.trim()) {
+      setSearchTerm(defaultValue);
+    }
+  }, [searchTerm, defaultValue]);
+
+  const filterOptions = useCallback(() => {
+    const filteredOptions = defaultFilterOptions(suggestions, {
+      inputValue: searchTerm,
+      getOptionLabel,
+    });
+    setOptions(filteredOptions);
+  }, [suggestions, searchTerm, getOptionLabel]);
+
+  const scrollIntoOption = useCallback(() => {
+    const option = contentRef?.current?.children[activeOption];
+    if (option) {
+      option.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start',
+      });
+    }
+  }, [activeOption]);
+
+  useOnClickOutside(wrapperRef, useCallback(clickOutside, [wrapperRef, searchTerm]));
+
+  useEffect(filterOptions, [searchTerm]);
+
+  useEffect(scrollIntoOption, [activeOption]);
+
+  useEffect(() => {
+    setSearchTerm(defaultValue);
+  }, [defaultValue]);
+
+  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  }, []);
+
+  const handleToggleShowOptions = useCallback(() => {
+    setShowOptions(!showOptions);
+  }, [showOptions]);
+
+  const handleClear = useCallback(() => {
+    setSearchTerm('');
+    setOptions([]);
+    setShowOptions(true);
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const handleClickOption = useCallback(
+    (option: Option) => () => {
+      if (onClick) {
+        onClick(option);
+      }
+      setSearchTerm(getOptionLabel(option));
+      setShowOptions(false);
+      if (inputRef.current) {
+        inputRef.current.blur();
+      }
+    },
+    [getOptionLabel, onClick]
+  );
+
+  const handleFocus = useCallback(() => {
+    setShowOptions(true);
+  }, []);
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      // User pressed the enter key
+      if (event.keyCode === 13) {
+        setActiveOption(0);
+        setShowOptions(false);
+        handleClickOption(options[activeOption])();
+        return;
+      }
+
+      // User pressed the up arrow
+      if (event.keyCode === 38) {
+        if (activeOption === 0) {
+          return;
+        }
+        setActiveOption(activeOption - 1);
+        return;
+      }
+
+      // User pressed the down arrow
+      if (event.keyCode === 40) {
+        if (activeOption + 1 >= options.length) {
+          return;
+        }
+        setActiveOption(activeOption + 1);
+        return;
+      }
+    },
+    [activeOption, handleClickOption, options]
+  );
+
+  const renderOptions = useCallback(() => {
+    if (renderOptionProp) {
+      return options.map((option, index) => (
+        <Option
+          isSelected={index === activeOption}
+          key={index}
+          onClick={handleClickOption(option)}
+          tabIndex={0}>
+          {renderOptionProp(option)}
+        </Option>
+      ));
+    }
+
+    return options.map((option, index) => (
+      <MenuItem
+        component="div"
+        key={index}
+        onClick={handleClickOption(option)}
+        selected={index === activeOption}
+        tabIndex={0}>
+        {getOptionLabel(option)}
+      </MenuItem>
+    ));
+  }, [options, activeOption, getOptionLabel, renderOptionProp, handleClickOption]);
+
+  return (
+    <Wrapper className={className} ref={wrapperRef}>
+      <StyledTextField
+        autoComplete="off"
+        InputProps={{
+          startAdornment: inputStartAdornment,
+          endAdornment: (
+            <EndAdornment>
+              {hasClearIcon && searchTerm.length > 0 && (
+                <IconButton
+                  color="inherit"
+                  onClick={handleClear}
+                  size="small"
+                  title={t('autoComplete.clear')}>
+                  <CloseIcon fontSize="small" />
+                </IconButton>
+              )}
+              <ExpandButton
+                color="inherit"
+                onClick={handleToggleShowOptions}
+                showOptions={showOptions}
+                size="small"
+                title={showOptions ? t('autoComplete.collapse') : t('autoComplete.expand')}>
+                <ExpandMoreIcon fontSize="small" />
+              </ExpandButton>
+            </EndAdornment>
+          ),
+        }}
+        inputRef={inputRef}
+        label={label}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        value={searchTerm}
+        variant={variant}
+      />
+      {showOptions && (
+        <StyledPaper ref={contentRef} square={true}>
+          {renderOptions()}
+        </StyledPaper>
+      )}
+    </Wrapper>
+  );
+};
+
+const MemoizedAutoComplete = memo(AutoComplete) as typeof AutoComplete;
+
+export { MemoizedAutoComplete as AutoComplete };
+
+const Wrapper = styled('div')`
+  position: relative;
+  height: 40px;
+`;
+
+const EndAdornment = styled('div')({
+  display: 'flex',
+});
+
+const StyledTextField = styled(TextField)<{ theme?: Theme }>(({ theme }) => ({
+  height: 40,
+  color: theme?.palette.white,
+  ['& .MuiInputBase-root']: {
+    height: 40,
+    color: theme?.palette.white,
+  },
+  ['& .MuiInputBase-inputAdornedStart']: {
+    paddingLeft: theme?.spacing(2),
+  },
+  ['& .MuiInputBase-input']: {
+    paddingTop: theme?.spacing(1),
+    paddingBottom: theme?.spacing(1),
+  },
+  ['& .MuiOutlinedInput-notchedOutline']: {
+    borderColor: 'transparent',
+  },
+  ['& :hover .MuiOutlinedInput-notchedOutline']: {
+    borderColor: theme?.palette.white,
+  },
+  ['& :active .MuiOutlinedInput-notchedOutline']: {
+    borderColor: theme?.palette.white,
+  },
+}));
+
+const ExpandButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== 'showOptions',
+})<{ showOptions: boolean }>(({ showOptions }) => ({
+  transform: showOptions ? 'rotate(180deg)' : 'none',
+}));
+
+const Option = styled('div')<{ isSelected: boolean }>(({ isSelected }) => ({
+  background: isSelected ? 'rgba(0, 0, 0, 0.08)' : 'none',
+}));
+
+const StyledPaper = withStyles((theme: Theme) => ({
+  root: {
+    marginTop: theme?.spacing(0.5),
+    borderRadius: 3,
+    maxHeight: 165,
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+  },
+}))(Paper);

package/src/components/AutoComplete/index.ts

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

package/src/components/AutoComplete/styles.tsx

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+import Paper from '../Paper';
+import TextField from '../TextField';
+
+export interface InputFieldProps {
+  color: string;
+}
+
+export const Wrapper = styled('div')({
+  width: '100%',
+  height: '32px',
+  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,
+    },
+  },
+}));
+
+/* eslint-disable verdaccio/jsx-spread */
+// @ts-ignore types of color are incompatible
+export const InputField: React.FC<InputFieldProps & TextFieldProps> = ({ ...others }) => (
+  <StyledTextField {...others} />
+);
+
+export const SuggestionContainer = styled(Paper)({
+  maxHeight: '500px',
+  overflowY: 'auto',
+});

package/src/components/AutoComplete/useAutoComplete.tsx

@@ -0,0 +1,61 @@
+// https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
+// Give up on IE 11 support for this feature
+function stripDiacritics(value: string) {
+  return typeof value.normalize !== 'undefined'
+    ? value.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    : value;
+}
+
+// Based on https://github.com/netochaves/material-ui/tree/test/useAutocomplete/packages/material-ui-lab/src/useAutocomplete
+type CreateFilterOptionsConfig = {
+  ignoreAccents?: boolean;
+  ignoreCase?: boolean;
+  limit?: number;
+  matchFrom?: 'any' | 'start';
+  trim?: boolean;
+};
+
+export interface FilterOptionsState<Option> {
+  inputValue: string;
+  getOptionLabel: (option: Option) => string;
+}
+
+function createFilterOptions(config?: CreateFilterOptionsConfig) {
+  const {
+    ignoreAccents = true,
+    ignoreCase = true,
+    trim = false,
+    limit,
+    matchFrom = 'any',
+  } = config || {};
+
+  return <Option extends {}>(
+    options: Option[],
+    { inputValue, getOptionLabel }: FilterOptionsState<Option>
+  ): Option[] => {
+    let input = trim ? inputValue.trim() : inputValue;
+    if (ignoreCase) {
+      input = input.toLowerCase();
+    }
+
+    if (ignoreAccents) {
+      input = stripDiacritics(input);
+    }
+
+    const filteredOptions = options.filter((option) => {
+      let candidate = getOptionLabel(option);
+      if (ignoreCase) {
+        candidate = candidate.toLowerCase();
+      }
+      if (ignoreAccents) {
+        candidate = stripDiacritics(candidate);
+      }
+
+      return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;
+    });
+
+    return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
+  };
+}
+
+export { createFilterOptions };

package/src/components/Avatar.tsx

@@ -0,0 +1,3 @@
+import { default as MaterialUIAvatar } from '@material-ui/core/Avatar';
+
+export default MaterialUIAvatar;

package/src/components/Box.tsx

@@ -0,0 +1,8 @@
+import { default as MaterialUIBox, BoxProps } from '@material-ui/core/Box';
+import React from 'react';
+
+function Box(props: BoxProps) {
+  return <MaterialUIBox {...props} />;
+}
+
+export default Box;

package/src/components/Button.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIButton, ButtonProps } from '@material-ui/core/Button';
+import React, { forwardRef } from 'react';
+
+type ButtonRef = HTMLButtonElement;
+
+const Button = forwardRef<ButtonRef, ButtonProps>(function Button(props, ref) {
+  return <MaterialUIButton {...props} ref={ref} />;
+});
+
+export default Button;

package/src/components/Card.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUICard, CardProps } from '@material-ui/core/Card';
+import React, { forwardRef } from 'react';
+
+type CardRef = HTMLDivElement;
+
+const Card = forwardRef<CardRef, CardProps>(function Card(props, ref) {
+  return <MaterialUICard {...props} ref={ref} />;
+});
+
+export default Card;

package/src/components/CardActions.tsx

@@ -0,0 +1,13 @@
+import { default as MaterialUICardActions, CardActionsProps } from '@material-ui/core/CardActions';
+import React, { forwardRef } from 'react';
+
+type CardActionsRef = HTMLDivElement;
+
+const CardActions = forwardRef<CardActionsRef, CardActionsProps>(function CardContentActions(
+  props,
+  ref
+) {
+  return <MaterialUICardActions {...props} innerRef={ref} />;
+});
+
+export default CardActions;

package/src/components/CardContent.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUICardContent, CardContentProps } from '@material-ui/core/CardContent';
+import React, { forwardRef } from 'react';
+
+type CardContentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const CardContent = forwardRef<CardContentRef, CardContentProps>(function CardContent(props, ref) {
+  return <MaterialUICardContent {...props} innerRef={ref} />;
+});
+
+export default CardContent;

package/src/components/Chip.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIChip, ChipProps } from '@material-ui/core/Chip';
+import React, { forwardRef } from 'react';
+
+type ChipRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const Chip = forwardRef<ChipRef, ChipProps>(function Chip(props, ref) {
+  return <MaterialUIChip {...props} innerRef={ref} />;
+});
+
+export default Chip;

package/src/components/CircularProgress.tsx

@@ -0,0 +1,15 @@
+import {
+  default as MaterialUICircularProgress,
+  CircularProgressProps,
+} from '@material-ui/core/CircularProgress';
+import React, { forwardRef } from 'react';
+
+type CircularProgressRef = HTMLDivElement;
+
+const CircularProgress = forwardRef<CircularProgressRef, CircularProgressProps>(
+  function CircularProgress(props, ref) {
+    return <MaterialUICircularProgress {...props} ref={ref} />;
+  }
+);
+
+export default CircularProgress;

package/src/components/CopyToClipBoard.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import FileCopy from '@material-ui/icons/FileCopy';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { copyToClipBoardUtility } from 'verdaccio-ui/utils/cli-utils';
+
+import IconButton from './IconButton';
+import Tooltip from './Tooltip';
+
+interface Props {
+  text: string;
+  children?: React.ReactNode;
+}
+
+function CopyToClipBoard({ text, children, ...props }: Props) {
+  const { t } = useTranslation();
+  return (
+    <Wrapper {...props}>
+      <Content>{children ?? text}</Content>
+      <Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
+        <IconButton onClick={copyToClipBoardUtility(text)} data-testid="copy-icon">
+          <FileCopy />
+        </IconButton>
+      </Tooltip>
+    </Wrapper>
+  );
+}
+
+export default CopyToClipBoard;
+
+const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+const Content = styled('span')({
+  display: 'inline-block',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  height: '21px',
+  fontSize: '1rem',
+});

package/src/components/Dialog.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIDialog, DialogProps } from '@material-ui/core/Dialog';
+import React, { forwardRef } from 'react';
+
+type DialogRef = HTMLDivElement;
+
+const Dialog = forwardRef<DialogRef, DialogProps>(function Dialog(props, ref) {
+  return <MaterialUIDialog {...props} ref={ref} />;
+});
+
+export default Dialog;

package/src/components/DialogActions.tsx

@@ -0,0 +1,16 @@
+import {
+  default as MaterialUIDialogActions,
+  DialogActionsProps,
+} from '@material-ui/core/DialogActions';
+import React, { forwardRef } from 'react';
+
+type DialogActionsRef = HTMLDivElement;
+
+const DialogActions = forwardRef<DialogActionsRef, DialogActionsProps>(function DialogActions(
+  props,
+  ref
+) {
+  return <MaterialUIDialogActions {...props} ref={ref} />;
+});
+
+export default DialogActions;

package/src/components/DialogContent.tsx

@@ -0,0 +1,16 @@
+import {
+  default as MaterialUIDialogContent,
+  DialogContentProps,
+} from '@material-ui/core/DialogContent';
+import React, { forwardRef } from 'react';
+
+type DialogContentRef = HTMLDivElement;
+
+const DialogContent = forwardRef<DialogContentRef, DialogContentProps>(function DialogContent(
+  props,
+  ref
+) {
+  return <MaterialUIDialogContent {...props} ref={ref} />;
+});
+
+export default DialogContent;

package/src/components/DialogTitle.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIDialogTitle, DialogTitleProps } from '@material-ui/core/DialogTitle';
+import React, { forwardRef } from 'react';
+
+type DialogTitleRef = HTMLDivElement;
+
+const DialogTitle = forwardRef<DialogTitleRef, DialogTitleProps>(function DialogTitle(props, ref) {
+  return <MaterialUIDialogTitle {...props} ref={ref} />;
+});
+
+export default DialogTitle;

package/src/components/Divider.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIDivider, DividerProps } from '@material-ui/core/Divider';
+import React, { forwardRef } from 'react';
+
+type DividerRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const Divider = forwardRef<DividerRef, DividerProps>(function Divider(props, ref) {
+  return <MaterialUIDivider {...props} innerRef={ref} />;
+});
+
+export default Divider;

package/src/components/FloatingActionButton.tsx

@@ -0,0 +1,12 @@
+import { default as MaterialUIFab, FabProps } from '@material-ui/core/Fab';
+import React, { forwardRef } from 'react';
+
+type FloatingActionButtonRef = HTMLButtonElement;
+
+const FloatingActionButton = forwardRef<FloatingActionButtonRef, FabProps>(
+  function FloatingActionButton(props, ref) {
+    return <MaterialUIFab {...props} ref={ref} data-testid="fab" />;
+  }
+);
+
+export default FloatingActionButton;

package/src/components/FormControl.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIFormControl, FormControlProps } from '@material-ui/core/FormControl';
+import React, { forwardRef } from 'react';
+
+type FormControlRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const FormControl = forwardRef<FormControlRef, FormControlProps>(function FormControl(props, ref) {
+  return <MaterialUIFormControl {...props} innerRef={ref} />;
+});
+
+export default FormControl;

package/src/components/FormHelperText.tsx

@@ -0,0 +1,16 @@
+import {
+  default as MaterialUIFormHelperText,
+  FormHelperTextProps,
+} from '@material-ui/core/FormHelperText';
+import React, { forwardRef } from 'react';
+
+type FormHelperTextRef = HTMLParagraphElement;
+
+const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>(function FormHelperText(
+  props,
+  ref
+) {
+  return <MaterialUIFormHelperText {...props} ref={ref} />;
+});
+
+export default FormHelperText;

package/src/components/Grid.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIGrid, GridProps } from '@material-ui/core/Grid';
+import React, { forwardRef } from 'react';
+
+type GridRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const Grid = forwardRef<GridRef, GridProps>(function Grid(props, ref) {
+  return <MaterialUIGrid {...props} innerRef={ref} />;
+});
+
+export default Grid;