@codacy/ui-components 0.49.4 → 0.50.4

package/lib/Icons/Symbols.d.ts

@@ -2,3 +2,4 @@
 export declare const CheckIcon: () => JSX.Element;
 export declare const MinusIcon: () => JSX.Element;
 export declare const CloseIcon: () => JSX.Element;
+export declare const DangerIcon: () => JSX.Element;

package/lib/Icons/Symbols.js

@@ -33,4 +33,23 @@ export var CloseIcon = function CloseIcon() {
     d: "M368 368L144 144M368 144L144 368",
     className: "ionicon-fill-none ionicon-stroke-width"
   }));
+};
+export var DangerIcon = function DangerIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "ionicon",
+    viewBox: "0 0 512 512"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M85.57 446.25h340.86a32 32 0 0028.17-47.17L284.18 82.58c-12.09-22.44-44.27-22.44-56.36 0L57.4 399.08a32 32 0 0028.17 47.17z",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "ionicon-fill-none ionicon-stroke-width"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M250.26 195.39l5.74 122 5.73-121.95a5.74 5.74 0 00-5.79-6h0a5.74 5.74 0 00-5.68 5.95z",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "ionicon-fill-none ionicon-stroke-width"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M256 397.25a20 20 0 1120-20 20 20 0 01-20 20z"
+  }));
 };

package/lib/Modal/ConfirmationModal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ConfirmationModalProps } from './types';
+import { DialogStateReturn } from 'reakit/ts/Dialog';
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps & DialogStateReturn>;

package/lib/Modal/ConfirmationModal.js

@@ -0,0 +1,44 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React, { useCallback, useRef } from 'react';
+import { Modal } from '.';
+import { Button, ButtonGroup, IconAndText, Subheader } from '..';
+export var ConfirmationModal = function ConfirmationModal(_ref) {
+  var title = _ref.title,
+      confirmText = _ref.confirmText,
+      onConfirm = _ref.onConfirm,
+      _ref$cancelText = _ref.cancelText,
+      cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
+      onCancel = _ref.onCancel,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+      icon = _ref.icon,
+      children = _ref.children,
+      dialog = _objectWithoutProperties(_ref, ["title", "confirmText", "onConfirm", "cancelText", "onCancel", "variant", "icon", "children"]);
+
+  var cancelRef = useRef(null);
+  var handleCancel = useCallback(function () {
+    if (onCancel) onCancel();
+    dialog.hide();
+  }, [onCancel, dialog]);
+  return /*#__PURE__*/React.createElement(Modal, Object.assign({
+    focusRef: cancelRef
+  }, dialog), /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Subheader, null, icon ? /*#__PURE__*/React.createElement(IconAndText, {
+    icon: icon,
+    iconProps: {
+      color: "icon-".concat(variant)
+    }
+  }, title) : /*#__PURE__*/React.createElement(React.Fragment, null, title))), /*#__PURE__*/React.createElement(Modal.Body, {
+    mt: 4
+  }, children), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    mt: 5
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    color: variant,
+    onClick: onConfirm
+  }, confirmText), /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    color: "subtle",
+    onClick: handleCancel,
+    ref: cancelRef
+  }, cancelText))));
+};

package/lib/Modal/index.d.ts

@@ -1 +1,2 @@
 export * from './Modal';
+export * from './ConfirmationModal';

package/lib/Modal/index.js

@@ -1 +1,2 @@
-export * from './Modal';
+export * from './Modal';
+export * from './ConfirmationModal';

package/lib/Modal/types.d.ts

@@ -40,3 +40,12 @@ export interface ModalProps extends ModalHeaderProps {
     /** Vertical positioning */
     vPos?: 'top' | 'center';
 }
+export interface ConfirmationModalProps extends Omit<ModalProps, 'title' | 'description' | 'headerImg' | 'focusRef'> {
+    title: string;
+    confirmText: string;
+    onConfirm: () => void;
+    cancelText?: string;
+    onCancel?: () => void;
+    variant?: 'primary' | 'danger';
+    icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+}

package/lib/Select/Select.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SelectProps } from './types';
-declare const StyledSelect: React.FC<SelectProps>;
-export { StyledSelect as Select };
+/** @deprecated Use Dropdown + SelectTrigger instead */
+export declare const Select: React.FC<SelectProps>;

package/lib/Select/Select.js

@@ -1,70 +1,41 @@
-import React from 'react';
-import Select, { components } from 'react-select';
-import { Labeled, Icon } from '../';
-import { InputWrapper, InputErrorMessage } from '../Input/styles';
-import { customStyles } from './style';
-import { ChevronDownIcon } from '../Icons';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React, { useCallback } from 'react';
+import { Dropdown, DropdownItem, SelectTrigger } from '../';
 
-var CaretDownIcon = function CaretDownIcon() {
-  return /*#__PURE__*/React.createElement(Icon, {
-    icon: ChevronDownIcon,
-    size: "md"
-  });
-};
-
-var DropdownIndicator = function DropdownIndicator(props) {
-  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(CaretDownIcon, null));
-};
-
-var StyledSelect = function StyledSelect(_ref) {
+/** @deprecated Use Dropdown + SelectTrigger instead */
+export var Select = function Select(_ref) {
   var options = _ref.options,
-      placeholder = _ref.placeholder,
-      _ref$isSearchable = _ref.isSearchable,
-      isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
-      name = _ref.name,
       id = _ref.id,
-      label = _ref.label,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      size = _ref.size,
-      _ref$hasError = _ref.hasError,
-      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
-      errorMessage = _ref.errorMessage,
-      inputId = _ref.inputId,
       value = _ref.value,
-      _onChange = _ref.onChange;
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
+      _onChange = _ref.onChange,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose,
+      portal = _ref.portal,
+      inputProps = _objectWithoutProperties(_ref, ["options", "id", "value", "onChange", "onOpen", "onClose", "portal"]);
+
+  var dropdownProps = {
+    onOpen: onOpen,
+    onClose: onClose,
+    portal: portal
+  };
+  var getLabel = useCallback(function (val) {
+    var value = val ? val : undefined;
+    return value ? value.label : '';
+  }, []);
+  return /*#__PURE__*/React.createElement(Dropdown, Object.assign({
     id: id,
-    inputId: inputId,
-    components: {
-      DropdownIndicator: DropdownIndicator
-    },
-    options: options,
-    styles: customStyles(hasError),
-    placeholder: placeholder,
-    isSearchable: isSearchable,
-    name: name,
-    maxMenuHeight: 230,
-    onChange: function onChange(value) {
-      return _onChange(value);
+    size: inputProps.size,
+    trigger: /*#__PURE__*/React.createElement(SelectTrigger, Object.assign({
+      id: id ? "".concat(id, "-input") : undefined,
+      caption: getLabel
+    }, inputProps)),
+    onChange: function onChange(val) {
+      return _onChange(val);
     },
-    value: value
-  }), hasError && /*#__PURE__*/React.createElement(InputErrorMessage, {
-    id: "error-".concat(id)
-  }, errorMessage));
-
-  if (!!label) {
-    return /*#__PURE__*/React.createElement(Labeled, {
-      forId: id,
-      label: label,
-      required: required,
-      size: size
-    }, content);
-  }
-
-  return /*#__PURE__*/React.createElement(InputWrapper, {
-    size: size
-  }, content);
-};
-
-export { StyledSelect as Select };
+    initialValue: value
+  }, dropdownProps), options.map(function (option) {
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      value: option
+    }, option.label);
+  }));
+};

package/lib/Select/types.d.ts

@@ -1,20 +1,14 @@
-import { Size } from '../theme';
+import { DropdownProps } from '../Dropdown/Dropdown.types';
+import { SelectTriggerProps } from '../Dropdown/Triggers/types';
 export declare type SelectOption = {
     value: string;
     label: string;
 };
-export interface SelectProps {
+export interface SelectProps extends Pick<DropdownProps, 'onClose' | 'onOpen' | 'portal'>, Omit<SelectTriggerProps, 'value' | 'onChange' | 'caption'> {
     id?: string;
     inputId?: string;
     options: Array<SelectOption>;
-    placeholder: string;
-    isSearchable?: boolean;
     name: string;
-    label?: string;
-    required?: boolean;
-    size?: Size;
-    hasError?: boolean;
-    errorMessage?: string | null;
     value?: SelectOption;
     onChange: (value: SelectOption) => void;
 }

package/lib/Table/Table.js

@@ -141,9 +141,9 @@ var VirtualRow = function VirtualRow(_ref8) {
       props = _objectWithoutProperties(_ref8, ["children", "index", "height"]);
 
   var scrollCtx = useContext(ScrollableContentContext);
-  var top = (index + 1) *
+  var top = (index + 1
   /* +1 to acknowledge the header row */
-  height;
+  ) * height;
   var threshold = height / 2;
   var inViewport = top >= scrollCtx.scroll - threshold && top <= scrollCtx.scroll + scrollCtx.height + threshold;
   return /*#__PURE__*/React.createElement(StyledTableRow, Object.assign({}, props, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.49.4",
+  "version": "0.50.4",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -28,29 +28,26 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled-base": "^10.0.31",
-    "@pathofdev/react-tag-input": "github:inesgomas/react-tag-input#9820d2ae045d9398fbd3ba9021f675b127003237",
-    "@popperjs/core": "^2.5.4",
+    "@pathofdev/react-tag-input": "github:inesgomas/react-tag-input",
     "@styled-system/should-forward-prop": "^5.1.5",
     "autosize": "^4.0.2",
     "emotion-theming": "10.x",
-    "lodash": "^4.17.20",
     "md5": "^2.3.0",
     "polished": "^3.6.7",
     "query-string": "^6.13.7",
     "react-popper": "^2.2.4",
-    "react-select": "3.1.0",
-    "react-spring": "^8.0.27",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
-    "@emotion/styled": "10.x",
-    "@storybook/addon-docs": "^6.3.8",
+    "@emotion/core": "^10.3.0",
+    "@emotion/styled": "^10.3.0",
+    "@emotion/styled-base": "^10.3.0",
+    "@popperjs/core": "^2.5.4",
+    "@storybook/addon-docs": "^6.4.9",
     "@storybook/addons": "^6.3.8",
-    "@storybook/react": "^6.3.8",
+    "@storybook/react": "^6.4.9",
     "@testing-library/dom": "^6.16.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^10.4.9",
@@ -61,25 +58,24 @@
     "@types/md5": "^2.2.1",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
-    "@types/react-select": "3.0.13",
+    "@types/resize-observer-browser": "^0.1.6",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__should-forward-prop": "^5.1.2",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
-    "@types/resize-observer-browser": "^0.1.6",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.1",
     "babel-plugin-emotion": "^10.0.33",
     "babel-preset-react-app": "^9.1.2",
     "copy-to-clipboard": "^3.3.1",
-    "depcheck": "^0.9.2",
+    "depcheck": "^1.4.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "^3.13.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-mdx": "^1.8.2",
+    "eslint-plugin-mdx": "^1.16.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^1.7.0",
@@ -89,23 +85,28 @@
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-watch-typeahead": "^0.4.2",
     "lint-staged": "^9.5.0",
+    "lodash": "^4.17.20",
     "prettier": "^1.19.1",
     "react": "^17.0.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.1",
+    "react-toastify": "^8.0.2",
+    "reakit": "^1.3.11",
     "rimraf": "^3.0.2",
     "typeface-clear-sans": "0.0.44",
-    "typescript": "^3.8.3",
-    "reakit": "1.1.1",
-    "react-toastify": "^8.0.2"
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
-    "@emotion/styled": "10.x",
-    "react": ">=16.13",
-    "react-dom": ">=16.13",
-    "typeface-clear-sans": "0.0.44",
-    "reakit": "1.1.1",
-    "react-toastify": "^8.0.2"
+    "@emotion/core": "^10.3.0",
+    "@emotion/styled": "^10.3.0",
+    "@emotion/styled-base": "^10.3.0",
+    "@popperjs/core": "^2.5.4",
+    "lodash": "^4.17.20",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react-toastify": "^8.0.2",
+    "reakit": "^1.3.11",
+    "typeface-clear-sans": "0.0.44"
   },
   "husky": {
     "hooks": {

package/lib/Select/style.d.ts

@@ -1,2 +0,0 @@
-import { Styles } from 'react-select';
-export declare function customStyles(hasError: boolean): Partial<Styles>;

package/lib/Select/style.js

@@ -1,76 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { theme } from '../';
-import { rgba } from 'polished';
-export function customStyles(hasError) {
-  return {
-    option: function option(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        backgroundColor: state.isSelected ? theme.colors['background-info'] : theme.colors['background-primary'],
-        color: theme.colors['text-secondary'],
-        fontSize: theme.fontSizes[2],
-        padding: "".concat(theme.space[1], " ").concat(theme.space[3]),
-        cursor: 'pointer',
-        ':hover': {
-          backgroundColor: !!!state.isSelected && theme.colors['background-secondary']
-        },
-        ':active, :focus': {
-          backgroundColor: theme.colors['background-info']
-        }
-      });
-    },
-    control: function control(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        height: '2rem',
-        minHeight: '2rem',
-        borderColor: state.menuIsOpen ? theme.colors['control-active-border'] : hasError ? theme.colors['control-invalid-border'] : theme.colors['control-border'],
-        ':hover': {
-          borderColor: hasError && !state.menuIsOpen ? theme.colors['control-invalid-border'] : theme.colors['control-active-border']
-        },
-        cursor: 'pointer',
-        boxShadow: 'none'
-      });
-    },
-    menu: function menu(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        border: theme.borderSize[0] + ' solid ' + theme.colors['brand-primary'],
-        boxShadow: '0 3px 6px ' + rgba(theme.colors['brand-primary'], 0.3),
-        marginTop: theme.space[1]
-      });
-    },
-    indicatorSeparator: function indicatorSeparator() {
-      return {
-        display: 'none'
-      };
-    },
-    placeholder: function placeholder(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        overflow: 'hidden',
-        position: 'absolute',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        maxWidth: "calc(100% - ".concat(theme.space[3], ")"),
-        color: state.isFocused || state.isSelected ? theme.colors['text-secondary'] : theme.colors['text-placeholder']
-      });
-    },
-    valueContainer: function valueContainer(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        fontSize: theme.fontSizes[2],
-        padding: "0px ".concat(theme.space[3])
-      });
-    },
-    menuList: function menuList(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        borderRadius: '0.25rem'
-      });
-    },
-    dropdownIndicator: function dropdownIndicator(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        '&, :hover': {
-          color: theme.colors['brand-primary']
-        },
-        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-        padding: "".concat(theme.space[1], " ").concat(theme.space[3])
-      });
-    }
-  };
-}