Merge pull request umami-software#492 from mikecao/dev

v1.13.0

components/common/Button.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import Icon from './Icon';
 import styles from './Button.module.css';
 
-export default function Button({
+function Button({
   type = 'button',
   icon,
   size,
@@ -43,3 +44,19 @@ export default function Button({
     </button>
   );
 }
+
+Button.propTypes = {
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  icon: PropTypes.node,
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
+  variant: PropTypes.oneOf(['action', 'danger', 'light']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  tooltip: PropTypes.node,
+  tooltipId: PropTypes.string,
+  disabled: PropTypes.bool,
+  iconRight: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default Button;

components/common/ButtonGroup.js

@@ -1,16 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Button from './Button';
 import styles from './ButtonGroup.module.css';
 
-export default function ButtonGroup({
-  items = [],
-  selectedItem,
-  className,
-  size,
-  icon,
-  onClick = () => {},
-}) {
+function ButtonGroup({ items = [], selectedItem, className, size, icon, onClick = () => {} }) {
   return (
     <div className={classNames(styles.group, className)}>
       {items.map(item => {
@@ -30,3 +24,19 @@ export default function ButtonGroup({
     </div>
   );
 }
+
+ButtonGroup.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any.isRequired,
+    }),
+  ),
+  selectedItem: PropTypes.any,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
+  icon: PropTypes.node,
+  onClick: PropTypes.func,
+};
+
+export default ButtonGroup;

components/common/Checkbox.js

@@ -1,9 +1,10 @@
 import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
 import Icon from 'components/common/Icon';
 import Check from 'assets/check.svg';
 import styles from './Checkbox.module.css';
 
-export default function Checkbox({ name, value, label, onChange }) {
+function Checkbox({ name, value, label, onChange }) {
   const ref = useRef();
 
   return (
@@ -25,3 +26,12 @@ export default function Checkbox({ name, value, label, onChange }) {
     </div>
   );
 }
+
+Checkbox.propTypes = {
+  name: PropTypes.string,
+  value: PropTypes.any,
+  label: PropTypes.node,
+  onChange: PropTypes.func,
+};
+
+export default Checkbox;

components/common/CopyButton.js

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import Button from './Button';
 import { FormattedMessage } from 'react-intl';
 
 const defaultText = (
   <FormattedMessage id="label.copy-to-clipboard" defaultMessage="Copy to clipboard" />
 );
 
-export default function CopyButton({ element, ...props }) {
+function CopyButton({ element, ...props }) {
   const [text, setText] = useState(defaultText);
 
   function handleClick() {
@@ -24,3 +25,13 @@ export default function CopyButton({ element, ...props }) {
     </Button>
   );
 }
+
+CopyButton.propTypes = {
+  element: PropTypes.shape({
+    current: PropTypes.shape({
+      select: PropTypes.func.isRequired,
+    }),
+  }),
+};
+
+export default CopyButton;

components/common/DateFilter.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { endOfYear, isSameDay } from 'date-fns';
 import Modal from './Modal';
@@ -54,7 +55,7 @@ const filterOptions = [
   },
 ];
 
-export default function DateFilter({ value, startDate, endDate, onChange, className }) {
+function DateFilter({ value, startDate, endDate, onChange, className }) {
   const [showPicker, setShowPicker] = useState(false);
   const displayValue =
     value === 'custom' ? (
@@ -117,3 +118,13 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
     </>
   );
 };
+
+DateFilter.propTypes = {
+  value: PropTypes.string,
+  startDate: PropTypes.instanceOf(Date),
+  endDate: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export default DateFilter;

components/common/Dot.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './Dot.module.css';
 
-export default function Dot({ color, size, className }) {
+function Dot({ color, size, className }) {
   return (
     <div className={styles.wrapper}>
       <div
@@ -15,3 +16,11 @@ export default function Dot({ color, size, className }) {
     </div>
   );
 }
+
+Dot.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'large']),
+  className: PropTypes.string,
+};
+
+export default Dot;

components/common/DropDown.js

@@ -1,18 +1,13 @@
 import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Menu from './Menu';
 import useDocumentClick from 'hooks/useDocumentClick';
 import Chevron from 'assets/chevron-down.svg';
 import styles from './Dropdown.module.css';
 import Icon from './Icon';
 
-export default function DropDown({
-  value,
-  className,
-  menuClassName,
-  options = [],
-  onChange = () => {},
-}) {
+function DropDown({ value, className, menuClassName, options = [], onChange = () => {} }) {
   const [showMenu, setShowMenu] = useState(false);
   const ref = useRef();
   const selectedOption = options.find(e => e.value === value);
@@ -52,3 +47,18 @@ export default function DropDown({
     </div>
   );
 }
+
+DropDown.propTypes = {
+  value: PropTypes.any,
+  className: PropTypes.string,
+  menuClassName: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.any.isRequired,
+      label: PropTypes.node,
+    }),
+  ),
+  onChange: PropTypes.func,
+};
+
+export default DropDown;

components/common/EmptyPlaceholder.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Icon from 'components/common/Icon';
 import Logo from 'assets/logo.svg';
 import styles from './EmptyPlaceholder.module.css';
 
-export default function EmptyPlaceholder({ msg, children }) {
+function EmptyPlaceholder({ msg, children }) {
   return (
     <div className={styles.placeholder}>
       <Icon className={styles.icon} icon={<Logo />} size="xlarge" />
@@ -12,3 +13,10 @@ export default function EmptyPlaceholder({ msg, children }) {
     </div>
   );
 }
+
+EmptyPlaceholder.propTypes = {
+  msg: PropTypes.node,
+  children: PropTypes.node,
+};
+
+export default EmptyPlaceholder;

components/common/Favicon.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Favicon.module.css';
 
 function getHostName(url) {
   const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
   return match && match.length > 1 ? match[1] : null;
 }
 
-export default function Favicon({ domain, ...props }) {
+function Favicon({ domain, ...props }) {
   const hostName = domain ? getHostName(domain) : null;
 
   return hostName ? (
@@ -19,3 +20,9 @@ export default function Favicon({ domain, ...props }) {
     />
   ) : null;
 }
+
+Favicon.propTypes = {
+  domain: PropTypes.string,
+};
+
+export default Favicon;

components/common/FilterButtons.js

@@ -1,11 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ButtonLayout from 'components/layout/ButtonLayout';
 import ButtonGroup from './ButtonGroup';
 
-export default function FilterButtons({ buttons, selected, onClick }) {
+function FilterButtons({ buttons, selected, onClick }) {
   return (
     <ButtonLayout>
       <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
     </ButtonLayout>
   );
 }
+
+FilterButtons.propTypes = {
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any.isRequired,
+    }),
+  ),
+  selected: PropTypes.any,
+  onClick: PropTypes.func,
+};
+
+export default FilterButtons;

components/common/Icon.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './Icon.module.css';
 
-export default function Icon({ icon, className, size = 'medium', ...props }) {
+function Icon({ icon, className, size = 'medium', ...props }) {
   return (
     <div
       className={classNames(styles.icon, className, {
@@ -18,3 +19,11 @@ export default function Icon({ icon, className, size = 'medium', ...props }) {
     </div>
   );
 }
+
+Icon.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.node.isRequired,
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
+};
+
+export default Icon;

components/common/Link.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import NextLink from 'next/link';
 import Icon from './Icon';
 import styles from './Link.module.css';
 
-export default function Link({ className, icon, children, size, iconRight, ...props }) {
+function Link({ className, icon, children, size, iconRight, ...props }) {
   return (
     <NextLink {...props}>
       <a
@@ -21,3 +22,13 @@ export default function Link({ className, icon, children, size, iconRight, ...pr
     </NextLink>
   );
 }
+
+Link.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  children: PropTypes.node,
+  size: PropTypes.oneOf(['large', 'small', 'xsmall']),
+  iconRight: PropTypes.bool,
+};
+
+export default Link;

components/common/Loading.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './Loading.module.css';
 
-export default function Loading({ className }) {
+function Loading({ className }) {
   return (
     <div className={classNames(styles.loading, className)}>
       <div />
@@ -11,3 +12,9 @@ export default function Loading({ className }) {
     </div>
   );
 }
+
+Loading.propTypes = {
+  className: PropTypes.string,
+};
+
+export default Loading;

components/common/Menu.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './Menu.module.css';
 
-export default function Menu({
+function Menu({
   options = [],
   selectedOption,
   className,
@@ -46,3 +47,24 @@ export default function Menu({
     </div>
   );
 }
+
+Menu.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any,
+      className: PropTypes.string,
+      render: PropTypes.func,
+      divider: PropTypes.bool,
+    }),
+  ),
+  selectedOption: PropTypes.any,
+  className: PropTypes.string,
+  float: PropTypes.oneOf(['top', 'bottom']),
+  align: PropTypes.oneOf(['left', 'right']),
+  optionClassName: PropTypes.string,
+  selectedClassName: PropTypes.string,
+  onSelect: PropTypes.func,
+};
+
+export default Menu;