@bitrise/bitkit 12.76.0 → 12.78.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.76.0",
+  "version": "12.78.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -11,6 +11,7 @@
   "scripts": {
     "build-storybook": "storybook build",
     "lint": "eslint src --ext ts,tsx",
+    "lint:fix": "eslint src --ext ts,tsx --fix",
     "release": "release-it minor --ci",
     "release-alpha": "release-it --preRelease=alpha --ci",
     "start": "npm run storybook",

package/src/Components/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DateTime } from 'luxon';
 import FocusLock from 'react-focus-lock';
 import { PopoverAnchor } from '@chakra-ui/react';
@@ -7,6 +7,7 @@ import Popover from '../Popover/Popover';
 import PopoverContent from '../Popover/PopoverContent';
 import Box from '../Box/Box';
 import useResponsive from '../../hooks/useResponsive';
+import Button from '../Button/Button';
 import DatePickerMonth from './DatePickerMonth';
 import { DatePickerContext } from './DatePicker.context';
 import DatePickerMonthSelector from './DatePickerMonthSelector';
@@ -16,38 +17,55 @@ import DatePickerFooter from './DatePickerFooter';
 
 export { useDateRange, DateRange };
 
-export interface DatePickerProps {
+export type DatePickerProps = {
   children: React.ReactNode;
   selectable?: DateRange;
-  selected?: DateRange;
-  onApply?: (range: DateRange) => void;
   onClose: () => void;
   onClear?: () => void;
   visible: boolean;
-}
+  variant?: 'default' | 'filter';
+} & (
+  | {
+      selected?: DateRange;
+      onApply?: (range: DateRange) => void;
+      mode?: 'range';
+    }
+  | {
+      selected?: DateTime;
+      onApply?: (day?: DateTime) => void;
+      mode: 'day';
+    }
+);
 
 /**
  * A simple date selection component, that supports a dual month view and
  * range selection.
  */
 const DatePicker = (props: DatePickerProps) => {
-  const { children, onApply, onClose, onClear, visible, selectable, selected } = props;
+  const { children, onApply, onClose, onClear, visible, selectable, selected, mode, variant = 'default' } = props;
+
+  const isSelectionHappened = useRef(false);
 
   const { isMobile } = useResponsive();
   const today = DateTime.now().startOf('day');
 
-  const [dateFrom, setDateFrom] = useState(selected?.from);
+  const initialRange = useMemo(
+    () => (mode === 'day' ? selected && new DateRange(selected) : selected),
+    [selected, mode],
+  );
+
+  const [dateFrom, setDateFrom] = useState(initialRange?.from);
   useEffect(() => {
-    if (!selected?.from || !dateFrom?.equals(selected.from)) {
-      setDateFrom(selected?.from);
+    if (!initialRange?.from || !dateFrom?.equals(initialRange.from)) {
+      setDateFrom(initialRange?.from);
     }
-  }, [selected]);
-  const [dateTo, setDateTo] = useState(selected?.to);
+  }, [initialRange]);
+  const [dateTo, setDateTo] = useState(initialRange?.to);
   useEffect(() => {
-    if (!selected?.to || !dateTo?.equals(selected.to)) {
-      setDateTo(selected?.to);
+    if (!initialRange?.to || !dateTo?.equals(initialRange.to)) {
+      setDateTo(initialRange?.to);
     }
-  }, [selected]);
+  }, [initialRange]);
 
   const handleClose = () => {
     onClose();
@@ -57,7 +75,11 @@ const DatePicker = (props: DatePickerProps) => {
 
   const handleApply = () => {
     if (onApply) {
-      onApply(new DateRange(dateFrom, dateTo));
+      if (mode === 'day') {
+        onApply(dateFrom);
+      } else {
+        onApply(new DateRange(dateFrom, dateTo));
+      }
     }
 
     handleClose();
@@ -67,8 +89,11 @@ const DatePicker = (props: DatePickerProps) => {
     initalView: dateFrom || selectable?.to,
   });
 
+  const isSingleMonthView = mode === 'day' || isMobile;
+
   const [preview, setPreview] = useState<'from' | 'to' | undefined>(undefined);
   const [isMonthSelector, setIsMonthSelector] = useState<'left' | 'right' | undefined>(undefined);
+
   const handlePreview = useCallback(
     (date: DateTime) => {
       if (!preview) {
@@ -85,10 +110,15 @@ const DatePicker = (props: DatePickerProps) => {
     },
     [preview, dateFrom, dateTo],
   );
+
   const handleSelect = useCallback(
     (date: DateTime) => {
+      isSelectionHappened.current = true;
+
       setPreview(undefined);
-      if (dateFrom && dateTo) {
+      if (mode === 'day') {
+        setDateFrom(date);
+      } else if (dateFrom && dateTo) {
         if (!preview) {
           setPreview('from');
           setDateFrom(date);
@@ -109,16 +139,32 @@ const DatePicker = (props: DatePickerProps) => {
     },
     [dateFrom, dateTo, preview],
   );
+
+  useEffect(() => {
+    if (variant === 'default') {
+      if (!dateFrom || !isSelectionHappened.current || preview) {
+        return;
+      }
+
+      if (mode !== 'day' && !dateTo) {
+        return;
+      }
+
+      handleApply();
+    }
+  }, [dateFrom, dateTo, preview, isSelectionHappened.current]);
+
   const currentSelected = useDateRange([dateFrom, dateTo]);
   const ctx = useObjectMemo({
     selectable,
     selected: currentSelected,
     preview,
-    showOutsideMonths: isMobile,
+    showOutsideMonths: isSingleMonthView,
     today,
     onPreview: handlePreview,
     onSelect: handleSelect,
   });
+
   const onMonthClickLeft = useCallback(() => setIsMonthSelector('left'), []);
   const onMonthClickRight = useCallback(() => setIsMonthSelector('right'), []);
   const onMonthSelected = useCallback(
@@ -152,11 +198,11 @@ const DatePicker = (props: DatePickerProps) => {
                     <DatePickerMonth
                       onMonthClick={onMonthClickLeft}
                       onViewDateChange={updateLeftViewDate}
-                      controls={isMobile ? 'both' : 'left'}
+                      controls={isSingleMonthView ? 'both' : 'left'}
                       viewDate={leftViewDate}
                     />
 
-                    {!isMobile && (
+                    {!isSingleMonthView && (
                       <DatePickerMonth
                         onMonthClick={onMonthClickRight}
                         onViewDateChange={updateRightViewDate}
@@ -165,7 +211,22 @@ const DatePicker = (props: DatePickerProps) => {
                       />
                     )}
                   </Box>
-                  <DatePickerFooter onApply={handleApply} onClose={handleClose} onClear={onClear} selected={selected} />
+                  {variant === 'filter' && (
+                    <DatePickerFooter
+                      onApply={handleApply}
+                      onClose={handleClose}
+                      onClear={onClear}
+                      selected={currentSelected}
+                      mode={mode || 'range'}
+                    />
+                  )}
+                  {variant === 'default' && mode === 'day' && (
+                    <Box display="flex" justifyContent="space-around">
+                      <Button onClick={() => handleSelect(DateTime.now())} variant="tertiary">
+                        Today
+                      </Button>
+                    </Box>
+                  )}
                 </>
               )}
             </Box>

package/src/Components/DatePicker/DatePickerDay.theme.ts

@@ -11,95 +11,134 @@ function selectionBorder({ selection }: DatePickerDayViewProps) {
   }
   return { borderRadius: borderRadii[selection] };
 }
-function previewStyles({ selection, preview, currentMonth }: DatePickerDayViewProps) {
-  const beingMoved = selection === preview;
-  const endpoint = selection === 'from' || selection === 'to';
-  if (selection === 'incomplete') {
-    return {
-      backgroundColor: 'purple.50',
-      color: 'neutral.100',
-    };
+
+function textStyle({ today, selection, currentMonth, selectable }: DatePickerDayViewProps) {
+  const endpoint = selection === 'from' || selection === 'to' || selection === 'incomplete';
+
+  if (!selectable) {
+    return undefined;
   }
-  if (selection === 'between') {
-    return {
-      bg: 'purple.95',
-      color: currentMonth ? 'purple.10' : 'neutral.70',
-    };
+
+  let backgroundColor: string | undefined;
+
+  if (!selection) {
+    if (currentMonth) {
+      backgroundColor = 'sys.interactive.moderate';
+    } else {
+      backgroundColor = 'sys.interactive.subtle';
+    }
   }
 
   if (endpoint) {
-    if (beingMoved) {
-      return {
-        bg: currentMonth ? 'purple.90' : 'purple.93',
-        color: currentMonth ? 'purple.10' : 'neutral.70',
-      };
-    }
     return {
-      bg: currentMonth ? 'purple.50' : 'purple.70',
-      color: currentMonth ? 'neutral.100' : 'purple.95',
+      borderColor: today && 'sys.interactive.moderate',
+      '&:hover, button:focus-visible > &': {
+        backgroundColor,
+      },
     };
   }
-  return {};
+
+  return {
+    borderColor: today && 'sys.interactive.base',
+    '&:hover, button:focus-visible > &': {
+      backgroundColor,
+    },
+  };
 }
-function selectionStyles({ selection, currentMonth }: DatePickerDayViewProps) {
-  if (!selection) {
-    return {};
-  }
-  if (selection === 'from' || selection === 'to' || selection === 'incomplete') {
-    return {
-      backgroundColor: currentMonth ? 'purple.50' : 'purple.70',
-      color: currentMonth ? 'neutral.100' : 'neutral.90',
-      '&:hover, &:focus-visible': {
-        outline: 'none',
-        boxShadow: 'none',
-        color: 'purple.90',
-        backgroundColor: 'purple.50',
+
+const buttonStyles = ({ today, selection, preview, selectable, currentMonth }: DatePickerDayViewProps) => {
+  const beingMoved = selection === preview;
+
+  const baseStyles = {
+    active: {
+      style: {
+        color: today ? 'sys.interactive.base' : 'sys.fg.primary',
       },
-    };
-  }
-  if (selection === 'between') {
-    return {
-      color: currentMonth ? 'purple.10' : 'neutral.70',
-      backgroundColor: 'purple.90',
-      '&:hover, &:focus-visible': {
-        outline: 'none',
-        boxShadow: 'none',
-        backgroundColor: 'purple.80',
+      rangeEnd: {
+        style: {
+          backgroundColor: beingMoved ? 'sys.interactive.muted' : 'sys.interactive.base',
+          color: beingMoved ? undefined : 'sys.fg.on-color',
+          '&:hover, &:focus-visible': {
+            backgroundColor: beingMoved ? undefined : 'sys.interactive.base',
+            color: beingMoved ? undefined : 'sys.interactive.moderate',
+          },
+        },
+      },
+      rangeMid: {
+        style: {
+          backgroundColor: 'sys.interactive.moderate',
+          '&:hover, &:focus-visible': {
+            backgroundColor: 'sys.interactive.muted',
+          },
+        },
+      },
+    },
+    'n/a': {
+      style: {
+        color: 'sys.fg.tertiary',
+      },
+      rangeEnd: {
+        style: {
+          backgroundColor: beingMoved ? 'sys.interactive.muted' : 'sys.interactive.highlight',
+          color: beingMoved ? 'sys.fg.tertiary' : 'sys.interactive.subtle',
+          '&:hover, &:focus-visible': {
+            color: 'sys.interactive.minimal',
+          },
+        },
       },
+      rangeMid: {
+        style: {
+          backgroundColor: 'sys.interactive.moderate',
+          color: 'sys.interactive.bold',
+          '&:hover, &:focus-visible': {
+            backgroundColor: 'sys.interactive.muted',
+            color: 'sys.interactive.minimal',
+          },
+        },
+      },
+    },
+  };
+
+  if (!selectable) {
+    return {
+      backgroundColor: 'sys.neutral.subtle',
+      color: 'sys.fg.disabled',
     };
   }
-  return { backgroundColor: 'purple.90' };
-}
+
+  const endpoint = selection === 'from' || selection === 'to' || selection === 'incomplete';
+  const range = selection && (endpoint ? 'rangeEnd' : 'rangeMid');
+  const dayStyles = baseStyles[currentMonth ? 'active' : 'n/a'];
+
+  return {
+    ...dayStyles.style,
+    ...(range ? dayStyles?.[range]?.style : {}),
+  };
+};
+
 const DatePickerDay = {
   parts: ['day', 'selection'],
   baseStyle(props: DatePickerDayViewProps) {
-    const { today, selectable, currentMonth, showOutsideDays, preview, selection } = props;
+    const { today, selectable } = props;
+
     return {
       text: {
         border: today ? '1.5px solid' : undefined,
-        borderColor: today ? 'purple.50' : undefined,
         width: '40',
         height: '32',
         borderRadius: '8',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        '&:hover, button:focus-visible > &': selectable
-          ? {
-              outline: 'none',
-              boxShadow: 'none',
-              backgroundColor: selection ? undefined : 'purple.90',
-            }
-          : undefined,
+        ...textStyle(props),
       },
       day: {
-        color: !selectable || (!currentMonth && showOutsideDays) ? 'neutral.70' : 'purple.10',
         _focusVisible: {
           outline: 'none',
           boxShadow: 'none',
         },
         cursor: !selectable ? 'default' : undefined,
-        ...(preview ? previewStyles(props) : selectionStyles(props)),
+        ...buttonStyles(props),
         ...selectionBorder(props),
       },
     };

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -51,12 +51,24 @@ const DatePickerDayView = ({
     currentMonth,
   });
   const ariaProps: BoxProps = {};
+
   if (currentMonth) {
-    ariaProps.as = 'button';
-    ariaProps.role = 'option';
+    ariaProps['aria-selected'] =
+      selection === 'from' || selection === 'to' || selection === 'incomplete' || selection === 'between';
+  } else {
+    ariaProps.tabIndex = -1;
   }
   return (
-    <Box {...ariaProps} sx={day} onMouseEnter={onMouseEnter} onFocus={onMouseEnter} onClick={onClick}>
+    <Box
+      {...ariaProps}
+      as="button"
+      role="option"
+      disabled={!selectable}
+      sx={day}
+      onMouseEnter={onMouseEnter}
+      onFocus={onMouseEnter}
+      onClick={onClick}
+    >
       <Text sx={text}>{children}</Text>
     </Box>
   );
@@ -64,7 +76,7 @@ const DatePickerDayView = ({
 const [DatePickerDayContext, useDatePickerDayContext] = createContext<Context>();
 export { DatePickerDayContext };
 
-const DatePickerDay = ({ n }: { n: number }): JSX.Element => {
+const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
   const {
     preview,
     selectable,
@@ -122,7 +134,10 @@ const DatePickerDay = ({ n }: { n: number }): JSX.Element => {
     }
   }, [onSelect, isSelectable, date]);
 
-  if (!isCurrentMonth && !showOutsideDays) {
+  if (isNextMonth && !showOutsideDays) {
+    return null;
+  }
+  if (isPreviousMonth && !showOutsideDays) {
     return <div />;
   }
   return (

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -3,36 +3,71 @@ import Text from '../Text/Text';
 import Button from '../Button/Button';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import { DateRange } from './useDateRange';
+import { useDatePickerContext } from './DatePicker.context';
 
 const DatePickerFooter = ({
   selected,
   onClose,
   onApply,
   onClear,
+  mode,
 }: {
   selected?: DateRange;
   onClose: () => void;
   onApply: () => void;
   onClear?: () => void;
+  mode: 'day' | 'range';
 }) => {
+  const { preview } = useDatePickerContext();
+
+  const styleGrid = (mobile: string, desktop: string) => (mode === 'day' ? mobile : [mobile, desktop]);
+
+  const displayDate = selected?.from || selected?.to;
+
   return (
     <Box
       display="grid"
-      gridTemplateColumns={['unset', '1fr auto 1fr']}
-      gridTemplateRows={['1.25rem 2rem', 'unset']}
-      gap="24"
+      gridTemplateColumns="1fr auto 1fr"
+      gridTemplateRows={styleGrid(displayDate ? '1.25rem 2rem' : '0 2rem', 'unset')}
+      gap={displayDate ? 24 : 0}
+      data-testid="footer"
     >
       {!!onClear && (
-        <Button size="small" variant="tertiary" color="purple.10" width="fit-content" onClick={() => onClear()}>
+        <Button
+          gridRow={styleGrid('2', '1')}
+          gridColumn="1"
+          size="small"
+          variant="tertiary"
+          color="purple.10"
+          width="fit-content"
+          onClick={() => onClear()}
+        >
           Clear
         </Button>
       )}
-      <Text alignSelf="center" justifySelf="center" size="2" color="text.secondary" gridColumn={['1', '2']}>
-        {selected?.from?.toFormat('DD', { locale: 'en-US' })}
-        {selected?.from || selected?.to ? ' - ' : undefined}
-        {selected?.to?.toFormat('DD', { locale: 'en-US' })}
+      <Text
+        gridRow="1"
+        gridColumn={styleGrid('1 / 4', '2')}
+        alignSelf="center"
+        justifySelf="center"
+        size="2"
+        color="text.secondary"
+      >
+        {mode === 'day' ? (
+          selected?.from?.toFormat('DD', { locale: 'en-US' })
+        ) : (
+          <>
+            {(!preview || preview === 'to') && selected?.from?.toFormat('DD', { locale: 'en-US' })}
+            {selected?.to && (
+              <>
+                {selected?.from || selected?.to ? ' - ' : undefined}
+                {(!preview || preview === 'from') && selected?.to?.toFormat('DD', { locale: 'en-US' })}
+              </>
+            )}
+          </>
+        )}
       </Text>
-      <ButtonGroup gridColumn={['1', '3']} justifyContent="end">
+      <ButtonGroup gridRow={styleGrid('2', '1')} gridColumn={styleGrid('2 / 4', '3')} justifyContent="end">
         <Button variant="secondary" onClick={onClose} size="small">
           Cancel
         </Button>

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -46,7 +46,7 @@ const DatePickerMonth = ({ controls, onViewDateChange, viewDate, onMonthClick }:
 
   const monthLabelId = useId();
   return (
-    <Box>
+    <Box data-testid={`controls-${controls}`}>
       <DatePickerHeader onPrevious={onPreviousMonth} onNext={onNextMonth} controls={controls}>
         <DatePickerHeaderPrevious label="previous month" />
         <DatePickerHeaderContent id={monthLabelId}>