@bitrise/bitkit 9.3.0 → 9.3.1

package/src/ButtonWithDropdown/ButtonWithDropdown.tsx

@@ -1,31 +1,31 @@
 import * as React from 'react';
 import {
-    Button,
-    ButtonProps,
-    DropdownMenu,
-    DropdownMenuItem,
-    DropdownMenuItemProps,
-    Icon,
-    Placement,
-    PlacementManager,
-    PlacementProps,
-    PlacementReference,
-    } from '@bitrise/bitkit';
+  Button,
+  ButtonProps,
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuItemProps,
+  Icon,
+  Placement,
+  PlacementManager,
+  PlacementProps,
+  PlacementReference,
+} from '@bitrise/bitkit';
 
 export interface ItemProps extends DropdownMenuItemProps {
-    component?: string;
-    disabled?: boolean;
-    href?: string;
-    target?: string;
-    text: string;
+  component?: string;
+  disabled?: boolean;
+  href?: string;
+  target?: string;
+  text: string;
 }
 
 export interface Props {
-    buttonProps?: ButtonProps;
-    children?: React.ReactElement | React.ReactNodeArray;
-    dropdownWidth?: string;
-    items: ItemProps[];
-    placementProps?: PlacementProps;
+  buttonProps?: ButtonProps;
+  children?: React.ReactElement | React.ReactNodeArray;
+  dropdownWidth?: string;
+  items: ItemProps[];
+  placementProps?: PlacementProps;
 }
 
 const ButtonWithDropdown = ({
@@ -40,38 +40,40 @@ const ButtonWithDropdown = ({
   return (
     <PlacementManager>
       <PlacementReference>
-        { ({ ref }) => (
-          <Button innerRef={ ref } onClick={ () => setVisible(true) } { ...buttonProps }>
-            { children }
+        {({ ref }) => (
+          <Button innerRef={ref} onClick={() => setVisible(true)} {...buttonProps}>
+            {children}
             <Icon name="ChevronDown" />
           </Button>
-        ) }
+        )}
       </PlacementReference>
-      { !buttonProps.disabled && (
+      {!buttonProps.disabled && (
         <Placement
-            disableMargin="left-right"
-            onClose={ () => setVisible(false) }
-            placement="bottom-end"
-            visible={ visible }
-            { ...placementProps }>
-          { () => (
-            <DropdownMenu width={ dropdownWidth } withArrow>
-              { items.map(({ component, disabled, href, icon, onClick, target, text }) => (
+          disableMargin="left-right"
+          onClose={() => setVisible(false)}
+          placement="bottom-end"
+          visible={visible}
+          {...placementProps}
+        >
+          {() => (
+            <DropdownMenu width={dropdownWidth} withArrow>
+              {items.map(({ component, disabled, href, icon, onClick, target, text }) => (
                 <DropdownMenuItem
-                    Component={ component || 'div' }
-                    disabled={ disabled }
-                    href={ href }
-                    icon={ icon }
-                    key={ text }
-                    onClick={ onClick }
-                    target={ target }>
-                  { text }
+                  Component={component || 'div'}
+                  disabled={disabled}
+                  href={href}
+                  icon={icon}
+                  key={text}
+                  onClick={onClick}
+                  target={target}
+                >
+                  {text}
                 </DropdownMenuItem>
-              )) }
+              ))}
             </DropdownMenu>
-          ) }
+          )}
         </Placement>
-      ) }
+      )}
     </PlacementManager>
   );
 };

package/src/Card/Card.tsx

@@ -22,11 +22,13 @@ const Card: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Flex { ...rest }
-        backgroundColor={ backgroundColor }
-        borderRadius={ borderRadius }
-        className={ classes }
-        direction={ direction } />
+    <Flex
+      {...rest}
+      backgroundColor={backgroundColor}
+      borderRadius={borderRadius}
+      className={classes}
+      direction={direction}
+    />
   );
 };
 

package/src/Card/CardButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button, { Props as ButtonProps } from '../Button/Button';
 
-export interface Props extends ButtonProps {}
+export type Props = ButtonProps;
 
 /**
  * The content that goes inside a Card. This is the component
@@ -9,9 +9,7 @@ export interface Props extends ButtonProps {}
  * with the CardDivider.
  */
 const CardButton: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Button { ...props } borderless />
-  );
+  return <Button {...props} borderless />;
 };
 
 export default CardButton;

package/src/Card/CardContent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 /**
  * The content that goes inside a Card. This is the component
@@ -9,9 +9,7 @@ export interface Props extends FlexProps {}
  * with the CardDivider.
  */
 const CardContent: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } className="Card__content" />
-  );
+  return <Flex {...props} className="Card__content" />;
 };
 
 export default CardContent;

package/src/Card/CardDivider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 /**
  * Dividers that can be used to separate CardContents. Can be used
@@ -9,9 +9,7 @@ export interface Props extends FlexProps {}
  * component.
  */
 const CardDivider: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } className="Card__divider" />
-  );
+  return <Flex {...props} className="Card__divider" />;
 };
 
 export default CardDivider;

package/src/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import './Checkbox.css';
 
-export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type Props = React.InputHTMLAttributes<HTMLInputElement>;
 
 /**
  * Run-of-the-mill Checkbox component.
@@ -12,29 +12,19 @@ const Checkbox: React.FunctionComponent<Props> = (props: Props) => {
   const { children, ...rest } = props;
 
   return (
-    <Flex
-        Component="label"
-        alignChildrenVertical="start"
-        className="Checkbox"
-        direction="horizontal"
-        gap="x2">
+    <Flex Component="label" alignChildrenVertical="start" className="Checkbox" direction="horizontal" gap="x2">
       <Flex>
-        <input { ...rest }
-            className="Checkbox__input"
-            type="checkbox" />
-        <Flex
-            alignChildren="middle"
-            className="Checkbox__indicator"
-            direction="horizontal">
+        <input {...rest} className="Checkbox__input" type="checkbox" />
+        <Flex alignChildren="middle" className="Checkbox__indicator" direction="horizontal">
           <Icon name="Tick" />
         </Flex>
       </Flex>
 
-      { children && (
-        <Flex grow initial="none" textColor="grape-5" >
-          { children }
+      {children && (
+        <Flex grow initial="none" textColor="grape-5">
+          {children}
         </Flex>
-      ) }
+      )}
     </Flex>
   );
 };

package/src/DatePicker/DatePicker.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import * as React from 'react';
 import { DateTime } from 'luxon';
 import { ReferenceChildrenProps } from 'react-popper';
@@ -5,12 +6,12 @@ import dataAtIds from '../dataAtIds.json';
 import { useMediaQuery, useSyncedStateAndProps } from '../hooks';
 import Button from '../Button/Button';
 import Buttons from '../Button/Buttons';
-import DatePickerMonth from './DatePickerMonth';
 import { Props as FlexProps } from '../Flex/Flex';
 import Placement from '../Placement/Placement';
 import PlacementArea from '../Placement/PlacementArea';
 import PlacementManager from '../Placement/PlacementManager';
 import PlacementReference from '../Placement/PlacementReference';
+import DatePickerMonth from './DatePickerMonth';
 import './DatePicker.css';
 
 const { useState } = React;
@@ -55,12 +56,7 @@ export interface Props extends FlexProps {
  * range selection.
  */
 const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    children,
-    onApply,
-    onClose,
-    visible,
-  } = props;
+  const { children, onApply, onClose, visible } = props;
 
   const match = useMediaQuery(['56rem']);
   const [dateSelectedFromMillis, setDateSelectedFromMillis] = useSyncedStateAndProps(props.dateSelectedFrom);
@@ -68,8 +64,10 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
   const [viewDateStartMillis, setViewDateStartMillis] = useState(dateSelectedFromMillis);
   const [viewDateEndMillis, setViewDateEndMillis] = useState(dateSelectedToMillis);
 
-  const dateSelectableFrom = props.dateSelectableFrom === undefined ? undefined : DateTime.fromMillis(props.dateSelectableFrom).startOf('day');
-  const dateSelectableTo = props.dateSelectableTo === undefined ? undefined : DateTime.fromMillis(props.dateSelectableTo);
+  const dateSelectableFrom =
+    props.dateSelectableFrom === undefined ? undefined : DateTime.fromMillis(props.dateSelectableFrom).startOf('day');
+  const dateSelectableTo =
+    props.dateSelectableTo === undefined ? undefined : DateTime.fromMillis(props.dateSelectableTo);
   const dateSelectedFrom = dateSelectedFromMillis && DateTime.fromMillis(dateSelectedFromMillis).startOf('day');
   const dateSelectedTo = dateSelectedToMillis && DateTime.fromMillis(dateSelectedToMillis).startOf('day');
 
@@ -77,9 +75,10 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
     ? DateTime.fromMillis(viewDateStartMillis).startOf('month')
     : DateTime.local().startOf('month');
 
-  const viewDateEnd = viewDateEndMillis && !DateTime.fromMillis(viewDateEndMillis).startOf('month').equals(viewDateStart)
-    ? DateTime.fromMillis(viewDateEndMillis).startOf('month')
-    : viewDateStart.plus({ months: 1 }).startOf('month');
+  const viewDateEnd =
+    viewDateEndMillis && !DateTime.fromMillis(viewDateEndMillis).startOf('month').equals(viewDateStart)
+      ? DateTime.fromMillis(viewDateEndMillis).startOf('month')
+      : viewDateStart.plus({ months: 1 }).startOf('month');
 
   const handleClose = () => {
     onClose();
@@ -142,65 +141,54 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
 
   return (
     <PlacementManager>
-      <PlacementReference>
-        { children }
-      </PlacementReference>
+      <PlacementReference>{children}</PlacementReference>
 
-      <Placement onClose={ onClose } visible={ visible }>
-        { () => (
+      <Placement onClose={onClose} visible={visible}>
+        {() => (
           <PlacementArea paddingVertical="x8">
             <PlacementArea direction="horizontal">
               <PlacementArea paddingHorizontal="x8">
                 <DatePickerMonth
-                    data-bitkit-at-id={ dataAtIds.DatePickerMonthLeft }
-                    dateSelectableFrom={ dateSelectableFrom }
-                    dateSelectableTo={ dateSelectableTo }
-                    dateSelectedFrom={ dateSelectedFrom }
-                    dateSelectedTo={ dateSelectedTo }
-                    onNextMonth={ handleNextMonthStart }
-                    onPreviousMonth={ handlePreviousMonthStart }
-                    onSelect={ handleSelect }
-                    viewDate={ viewDateStart } />
+                  data-bitkit-at-id={dataAtIds.DatePickerMonthLeft}
+                  dateSelectableFrom={dateSelectableFrom}
+                  dateSelectableTo={dateSelectableTo}
+                  dateSelectedFrom={dateSelectedFrom}
+                  dateSelectedTo={dateSelectedTo}
+                  onNextMonth={handleNextMonthStart}
+                  onPreviousMonth={handlePreviousMonthStart}
+                  onSelect={handleSelect}
+                  viewDate={viewDateStart}
+                />
               </PlacementArea>
 
-              { match('56rem') && (
+              {match('56rem') && (
                 <PlacementArea paddingHorizontal="x8">
                   <DatePickerMonth
-                      data-bitkit-at-id={ dataAtIds.DatePickerMonthRight }
-                      dateSelectableFrom={ dateSelectableFrom }
-                      dateSelectableTo={ dateSelectableTo }
-                      dateSelectedFrom={ dateSelectedFrom }
-                      dateSelectedTo={ dateSelectedTo }
-                      onNextMonth={ handleNextMonthEnd }
-                      onPreviousMonth={ handlePreviousMonthEnd }
-                      onSelect={ handleSelect }
-                      viewDate={ viewDateEnd } />
+                    data-bitkit-at-id={dataAtIds.DatePickerMonthRight}
+                    dateSelectableFrom={dateSelectableFrom}
+                    dateSelectableTo={dateSelectableTo}
+                    dateSelectedFrom={dateSelectedFrom}
+                    dateSelectedTo={dateSelectedTo}
+                    onNextMonth={handleNextMonthEnd}
+                    onPreviousMonth={handlePreviousMonthEnd}
+                    onSelect={handleSelect}
+                    viewDate={viewDateEnd}
+                  />
                 </PlacementArea>
-              ) }
-
+              )}
             </PlacementArea>
 
-            <Buttons
-                alignChildren="end"
-                margin="x2"
-                paddingHorizontal="x8">
-              <Button
-                  level="secondary"
-                  onClick={ handleClose }
-                  size="small">
+            <Buttons alignChildren="end" margin="x2" paddingHorizontal="x8">
+              <Button level="secondary" onClick={handleClose} size="small">
                 Cancel
               </Button>
 
-              <Button
-                  data-bitkit-at-id={ dataAtIds.DatePickerApply }
-                  level="primary"
-                  onClick={ handleApply }
-                  size="small">
+              <Button data-bitkit-at-id={dataAtIds.DatePickerApply} level="primary" onClick={handleApply} size="small">
                 Apply
               </Button>
             </Buttons>
           </PlacementArea>
-        ) }
+        )}
       </Placement>
     </PlacementManager>
   );

package/src/DatePicker/DatePickerDay.tsx

@@ -15,21 +15,13 @@ interface Props extends FlexProps {
 }
 
 const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    dateSelectableFrom,
-    dateSelectableTo,
-    dateSelectedFrom,
-    dateSelectedTo,
-    n,
-    onSelect,
-    viewDate,
-    ...rest
-  } = props;
+  const { dateSelectableFrom, dateSelectableTo, dateSelectedFrom, dateSelectedTo, n, onSelect, viewDate, ...rest } =
+    props;
 
   const date = viewDate.plus({ days: n - viewDate.weekday });
 
   const dayOfWeek = viewDate.weekday;
-  const daysInMonth = viewDate.daysInMonth;
+  const { daysInMonth } = viewDate;
   const daysInPreviousMonth = viewDate.minus({ month: 1 }).daysInMonth;
 
   const isPreviousMonth = n < dayOfWeek;
@@ -41,9 +33,15 @@ const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
 
   const hasSelectionRange = dateSelectedFrom && dateSelectedTo && !dateSelectedFrom.equals(dateSelectedTo);
 
-  const isSelectedFrom = isCurrentMonth && (dateSelectedFrom && date.equals(dateSelectedFrom));
-  const isSelectedTo = isCurrentMonth && (dateSelectedTo && date.equals(dateSelectedTo));
-  const isSelectedBetween = isCurrentMonth && dateSelectedFrom && dateSelectedTo && hasSelectionRange && (+date > +dateSelectedFrom && +date < +dateSelectedTo);
+  const isSelectedFrom = isCurrentMonth && dateSelectedFrom && date.equals(dateSelectedFrom);
+  const isSelectedTo = isCurrentMonth && dateSelectedTo && date.equals(dateSelectedTo);
+  const isSelectedBetween =
+    isCurrentMonth &&
+    dateSelectedFrom &&
+    dateSelectedTo &&
+    hasSelectionRange &&
+    +date > +dateSelectedFrom &&
+    +date < +dateSelectedTo;
 
   const classes = classnames('DatePicker__day', {
     'DatePicker__day--selected': isSelectedFrom || isSelectedTo,
@@ -56,19 +54,18 @@ const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Flex { ...rest }
-        alignChildren="middle"
-        className={ classes }
-        data-bitkit-at-id={ isSelectable ? dataAtIds.DatePickerDay : undefined }
-        direction="horizontal"
-        onClick={ isSelectable ? () => onSelect(date) : undefined }>
-      <Flex
-          alignChildren="middle"
-          className="DatePicker__day-inner"
-          direction="horizontal">
-        { isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n) }
-        { isCurrentMonth && n - dayOfWeek + 1 }
-        { isNextMonth && n - dayOfWeek - daysInMonth + 1 }
+    <Flex
+      {...rest}
+      alignChildren="middle"
+      className={classes}
+      data-bitkit-at-id={isSelectable ? dataAtIds.DatePickerDay : undefined}
+      direction="horizontal"
+      onClick={isSelectable ? () => onSelect(date) : undefined}
+    >
+      <Flex alignChildren="middle" className="DatePicker__day-inner" direction="horizontal">
+        {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n)}
+        {isCurrentMonth && n - dayOfWeek + 1}
+        {isNextMonth && n - dayOfWeek - daysInMonth + 1}
       </Flex>
     </Flex>
   );

package/src/DatePicker/DatePickerGrid.tsx

@@ -1,16 +1,10 @@
 import * as React from 'react';
 import Grid, { Props as GridProps } from '../Grid/Grid';
 
-interface Props extends GridProps {}
+type Props = GridProps;
 
 const DatePickerGrid: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Grid { ...props }
-        className="DatePicker__grid"
-        gapVertical="x1"
-        repeat="7"
-        repeatWidth="3rem" />
-  );
+  return <Grid {...props} className="DatePicker__grid" gapVertical="x1" repeat="7" repeatWidth="3rem" />;
 };
 
 export default DatePickerGrid;

package/src/DatePicker/DatePickerMonth.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { DateTime, Info } from 'luxon';
 import Base, { Props as BaseProps } from '../Base/Base';
-import DatePickerDay from './DatePickerDay';
-import DatePickerGrid from './DatePickerGrid';
 import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import Link from '../Link/Link';
 import Text from '../Text/Text';
+import DatePickerGrid from './DatePickerGrid';
+import DatePickerDay from './DatePickerDay';
 
 const daysOfTheWeek = Info.weekdays('short');
 const daysCount = 6 * 7;
@@ -36,57 +36,49 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
   } = props;
 
   return (
-    <Base { ...rest }>
-      <Flex
-          alignChildren="middle"
-          direction="horizontal"
-          gap="x4"
-          margin="x4"
-          paddingHorizontal="x12">
+    <Base {...rest}>
+      <Flex alignChildren="middle" direction="horizontal" gap="x4" margin="x4" paddingHorizontal="x12">
         <Flex>
-          <Link onClick={ onPreviousMonth }>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link onClick={onPreviousMonth}>
             <Icon name="ChevronLeft" />
           </Link>
         </Flex>
 
         <Flex grow>
-          <Text align="middle">{ viewDate.toFormat('MMMM yyyy') }</Text>
+          <Text align="middle">{viewDate.toFormat('MMMM yyyy')}</Text>
         </Flex>
 
         <Flex>
-          <Link onClick={ onNextMonth }>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link onClick={onNextMonth}>
             <Icon name="ChevronRight" />
           </Link>
         </Flex>
       </Flex>
 
       <DatePickerGrid margin="x1">
-        { daysOfTheWeek.map((day) => (
-          <Text
-              align="middle"
-              key={ day }
-              paddingVertical="x4"
-              size="2"
-              textColor="gray-5"
-              uppercase>
-            { day }
+        {daysOfTheWeek.map((day) => (
+          <Text align="middle" key={day} paddingVertical="x4" size="2" textColor="gray-5" uppercase>
+            {day}
           </Text>
-        )) }
+        ))}
       </DatePickerGrid>
 
-      <DatePickerGrid
-          paddingVertical="x2">
-        { Array.from({ length: daysCount }).map((_, i) => (
+      <DatePickerGrid paddingVertical="x2">
+        {Array.from({ length: daysCount }).map((_, i) => (
           <DatePickerDay
-              dateSelectableFrom={ dateSelectableFrom }
-              dateSelectableTo={ dateSelectableTo }
-              dateSelectedFrom={ dateSelectedFrom }
-              dateSelectedTo={ dateSelectedTo }
-              key={ i }
-              n={ i + 1 }
-              onSelect={ onSelect }
-              viewDate={ viewDate } />
-        )) }
+            dateSelectableFrom={dateSelectableFrom}
+            dateSelectableTo={dateSelectableTo}
+            dateSelectedFrom={dateSelectedFrom}
+            dateSelectedTo={dateSelectedTo}
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            n={i + 1}
+            onSelect={onSelect}
+            viewDate={viewDate}
+          />
+        ))}
       </DatePickerGrid>
     </Base>
   );

package/src/Divider/Divider.tsx

@@ -29,13 +29,7 @@ const Divider: React.FunctionComponent<Props> = (props: Props) => {
     [direction === 'horizontal' ? 'borderTopWidth' : 'borderRightWidth']: width,
   };
 
-  return (
-    <Base { ...rest }
-        Component="hr"
-        className={ classes }
-        style={ style }
-        textColor={ color } />
-  );
+  return <Base {...rest} Component="hr" className={classes} style={style} textColor={color} />;
 };
 
 Divider.defaultProps = {

package/src/Dot/Dot.tsx

@@ -13,13 +13,7 @@ export interface Props extends BaseProps {
 const Dot: React.FunctionComponent<Props> = (props: Props) => {
   const { backgroundColor, size, ...rest } = props;
 
-  return (
-    <Base { ...rest }
-        backgroundColor={ backgroundColor }
-        className="Dot"
-        height={ size }
-        width={ size } />
-  );
+  return <Base {...rest} backgroundColor={backgroundColor} className="Dot" height={size} width={size} />;
 };
 
 export default Dot;