@bitrise/bitkit 12.83.0 → 12.84.0

package/src/Components/CodeBlock/CodeBlock.theme.ts

@@ -4,21 +4,21 @@ const itemHelpers = createMultiStyleConfigHelpers(['container', 'codeBox', 'copy
 
 const CodeBlockTheme = itemHelpers.defineMultiStyleConfig({
   baseStyle: {
-    container: {
-      position: 'relative',
-    },
     codeBox: {
-      minHeight: '4rem',
-      py: '8',
-      px: '12',
       bg: 'neutral.95',
       border: '1px solid',
       borderColor: 'separator.primary',
       borderRadius: '8',
       fontSize: '2',
+      minHeight: '4rem',
+      overflowY: 'auto',
+      px: '12',
+      py: '8',
       textWrap: 'wrap',
       wordBreak: 'break-all',
-      overflowY: 'auto',
+    },
+    container: {
+      position: 'relative',
     },
     copyIcon: {
       position: 'absolute',

package/src/Components/CodeBlock/CodeBlock.tsx

@@ -16,17 +16,17 @@ const CodeBlock = ({ children, isCopiable, ...props }: CodeBlockProps) => {
 
   return (
     <Box sx={style.container} {...otherProps}>
-      <Box sx={style.codeBox} as="pre" maxHeight={maxHeight}>
+      <Box as="pre" maxHeight={maxHeight} sx={style.codeBox}>
         {children}
       </Box>
       {isCopiable && (
         <IconButton
-          iconName="Duplicate"
           aria-label="Copy to clipboard"
+          iconName="Duplicate"
+          onClick={onCopy}
           size="small"
-          variant="secondary"
           sx={style.copyIcon}
-          onClick={onCopy}
+          variant="secondary"
         />
       )}
     </Box>

package/src/Components/CodeSnippet/CodeSnippet.theme.ts

@@ -2,28 +2,28 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 
 const baseStyle = defineStyle(({ isCopiable }) => {
   const style = {
+    bg: 'neutral.95',
+    borderRadius: '2',
     fontFamily: 'mono',
-    py: '4',
+    fontSize: '2',
     px: '8',
-    borderRadius: '2',
-    bg: 'neutral.95',
+    py: '4',
     width: 'fit-content',
-    fontSize: '2',
   };
 
   if (isCopiable) {
     return {
       ...style,
-      cursor: 'pointer',
-      _hover: {
-        background: 'neutral.93',
-      },
       _active: {
         background: 'neutral.90',
       },
       _focusVisible: {
         boxShadow: 'outline',
       },
+      _hover: {
+        background: 'neutral.93',
+      },
+      cursor: 'pointer',
     };
   }
 

package/src/Components/CodeSnippet/CodeSnippet.tsx

@@ -11,7 +11,7 @@ export interface CodeSnippetProps extends Omit<BoxProps, 'children'> {
 const CodeSnippet = (props: CodeSnippetProps) => {
   const { children, isCopiable, ...rest } = props;
   const css = useStyleConfig('CodeSnippet', { isCopiable });
-  const { onCopy, hasCopied } = useClipboard(children);
+  const { hasCopied, onCopy } = useClipboard(children);
 
   const [isTooltipOpen, setTooltipOpen] = useState(false);
 
@@ -20,10 +20,10 @@ const CodeSnippet = (props: CodeSnippetProps) => {
       <Box
         __css={css}
         as="code"
-        tabIndex={0}
         onClick={isCopiable ? onCopy : undefined}
         onMouseEnter={() => (isCopiable ? setTooltipOpen(true) : undefined)}
         onMouseLeave={() => (isCopiable ? setTooltipOpen(false) : undefined)}
+        tabIndex={0}
         {...rest}
       >
         {children}

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -2,77 +2,77 @@ import { ColorScheme } from '../../tokens/tokens';
 
 const schemeColors: Record<ColorScheme, any> = {
   blue: {
-    color: 'blue.40',
     _active: {
       backgroundColor: 'blue.90',
     },
     _hover: {
       backgroundColor: 'blue.93',
     },
+    color: 'blue.40',
   },
-  red: {
-    color: 'red.40',
+  green: {
     _active: {
-      backgroundColor: 'red.90',
+      backgroundColor: 'green.90',
     },
     _hover: {
-      backgroundColor: 'red.93',
+      backgroundColor: 'green.93',
     },
+    color: 'green.40',
   },
-  orange: {
-    color: 'orange.40',
+  neutral: {
     _active: {
-      backgroundColor: 'orange.90',
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
     },
     _hover: {
-      backgroundColor: 'orange.93',
+      backgroundColor: 'rgba(255, 255, 255, 0.15)',
     },
+    color: 'neutral.100',
   },
-  yellow: {
-    color: 'yellow.40',
+  orange: {
     _active: {
-      backgroundColor: 'yellow.90',
+      backgroundColor: 'orange.90',
     },
     _hover: {
-      backgroundColor: 'yellow.93',
+      backgroundColor: 'orange.93',
     },
+    color: 'orange.40',
   },
-  green: {
-    color: 'green.40',
+  purple: {
     _active: {
-      backgroundColor: 'green.90',
+      backgroundColor: 'purple.90',
     },
     _hover: {
-      backgroundColor: 'green.93',
+      backgroundColor: 'purple.93',
     },
-  },
-  purple: {
     color: 'purple.40',
+  },
+  red: {
     _active: {
-      backgroundColor: 'purple.90',
+      backgroundColor: 'red.90',
     },
     _hover: {
-      backgroundColor: 'purple.93',
+      backgroundColor: 'red.93',
     },
+    color: 'red.40',
   },
-  neutral: {
-    color: 'neutral.100',
+  yellow: {
     _active: {
-      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+      backgroundColor: 'yellow.90',
     },
     _hover: {
-      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+      backgroundColor: 'yellow.93',
     },
+    color: 'yellow.40',
   },
 };
 
 const ColorButtonTheme = {
   baseStyle: ({ colorScheme }: { colorScheme?: ColorScheme }) => {
     return {
-      display: 'inline-flex',
       alignItems: 'center',
-      justifyContent: 'center',
       backgroundColor: 'transparent',
+      display: 'inline-flex',
+      justifyContent: 'center',
       ...schemeColors[colorScheme || 'blue'],
     };
   },

package/src/Components/ColorButton/ColorButton.tsx

@@ -17,8 +17,8 @@ const ColorButton = forwardRef<ColorButtonProps, 'button'>((props, ref) => {
   };
 
   const properties: ChakraButtonProps = {
-    as,
     __css: styles,
+    as,
     isDisabled,
     isLoading,
     ...rest,
@@ -26,7 +26,7 @@ const ColorButton = forwardRef<ColorButtonProps, 'button'>((props, ref) => {
   if (isDisabled) {
     properties.as = 'button';
   }
-  return <ChakraButton {...properties} size="small" ref={ref} />;
+  return <ChakraButton {...properties} ref={ref} size="small" />;
 });
 
 ColorButton.defaultProps = {

package/src/Components/DatePicker/DatePicker.tsx

@@ -42,7 +42,7 @@ export type DatePickerProps = {
  * range selection.
  */
 const DatePicker = (props: DatePickerProps) => {
-  const { children, onApply, onClose, onClear, visible, selectable, selected, mode, variant = 'default' } = props;
+  const { children, mode, onApply, onClear, onClose, selectable, selected, variant = 'default', visible } = props;
 
   const { isMobile } = useResponsive();
   const today = DateTime.now().startOf('day');
@@ -157,13 +157,13 @@ const DatePicker = (props: DatePickerProps) => {
 
   const currentSelected = useDateRange([dateFrom, dateTo]);
   const ctx = useObjectMemo({
+    onPreview: handlePreview,
+    onSelect: handleSelect,
+    preview,
     selectable,
     selected: currentSelected,
-    preview,
     showOutsideMonths: isSingleMonthView,
     today,
-    onPreview: handlePreview,
-    onSelect: handleSelect,
   });
 
   const onMonthClickLeft = useCallback(() => setIsMonthSelector('left'), []);
@@ -182,7 +182,7 @@ const DatePicker = (props: DatePickerProps) => {
   );
 
   return (
-    <Popover modifiers={[]} isOpen={visible} onClose={onClose} isLazy lazyBehavior="unmount">
+    <Popover isLazy isOpen={visible} lazyBehavior="unmount" modifiers={[]} onClose={onClose}>
       <PopoverTrigger>{children}</PopoverTrigger>
       <PopoverContent aria-label="select date range">
         <FocusLock returnFocus>
@@ -197,28 +197,28 @@ const DatePicker = (props: DatePickerProps) => {
                 <>
                   <Box display="flex" gap="32" marginBottom="24">
                     <DatePickerMonth
+                      controls={isSingleMonthView ? 'both' : 'left'}
                       onMonthClick={onMonthClickLeft}
                       onViewDateChange={updateLeftViewDate}
-                      controls={isSingleMonthView ? 'both' : 'left'}
                       viewDate={leftViewDate}
                     />
 
                     {!isSingleMonthView && (
                       <DatePickerMonth
+                        controls="right"
                         onMonthClick={onMonthClickRight}
                         onViewDateChange={updateRightViewDate}
-                        controls="right"
                         viewDate={rightViewDate}
                       />
                     )}
                   </Box>
                   {variant === 'filter' && (
                     <DatePickerFooter
+                      mode={mode || 'range'}
                       onApply={() => handleApply(dateFrom, dateTo)}
-                      onClose={handleClose}
                       onClear={onClear}
+                      onClose={handleClose}
                       selected={currentSelected}
-                      mode={mode || 'range'}
                     />
                   )}
                   {variant === 'default' && mode === 'day' && (

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

@@ -2,8 +2,8 @@ import type { DatePickerDayViewProps } from './DatePickerDay';
 
 const borderRadii: Record<string, string> = {
   from: '0.5rem 0 0 0.5rem',
-  to: '0 0.5rem 0.5rem 0',
   incomplete: '0.5rem',
+  to: '0 0.5rem 0.5rem 0',
 };
 function selectionBorder({ selection }: DatePickerDayViewProps) {
   if (!selection || selection === 'between') {
@@ -12,7 +12,7 @@ function selectionBorder({ selection }: DatePickerDayViewProps) {
   return { borderRadius: borderRadii[selection] };
 }
 
-function textStyle({ today, selection, currentMonth, selectable }: DatePickerDayViewProps) {
+function textStyle({ currentMonth, selectable, selection, today }: DatePickerDayViewProps) {
   const endpoint = selection === 'from' || selection === 'to' || selection === 'incomplete';
 
   if (!selectable) {
@@ -31,71 +31,71 @@ function textStyle({ today, selection, currentMonth, selectable }: DatePickerDay
 
   if (endpoint) {
     return {
-      borderColor: today && 'sys.interactive.moderate',
       '&:hover, button:focus-visible > &': {
         backgroundColor,
       },
+      borderColor: today && 'sys.interactive.moderate',
     };
   }
 
   return {
-    borderColor: today && 'sys.interactive.base',
     '&:hover, button:focus-visible > &': {
       backgroundColor,
     },
+    borderColor: today && 'sys.interactive.base',
   };
 }
 
-const buttonStyles = ({ today, selection, preview, selectable, currentMonth }: DatePickerDayViewProps) => {
+const buttonStyles = ({ currentMonth, preview, selectable, selection, today }: DatePickerDayViewProps) => {
   const beingMoved = selection === preview;
 
   const baseStyles = {
     active: {
-      style: {
-        color: today ? 'sys.interactive.base' : 'sys.fg.primary',
-      },
       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',
           },
+          backgroundColor: beingMoved ? 'sys.interactive.muted' : 'sys.interactive.base',
+          color: beingMoved ? undefined : 'sys.fg.on-color',
         },
       },
       rangeMid: {
         style: {
-          backgroundColor: 'sys.interactive.moderate',
           '&:hover, &:focus-visible': {
             backgroundColor: 'sys.interactive.muted',
           },
+          backgroundColor: 'sys.interactive.moderate',
         },
       },
-    },
-    'n/a': {
       style: {
-        color: 'sys.fg.tertiary',
+        color: today ? 'sys.interactive.base' : 'sys.fg.primary',
       },
+    },
+    'n/a': {
       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',
           },
+          backgroundColor: beingMoved ? 'sys.interactive.muted' : 'sys.interactive.highlight',
+          color: beingMoved ? 'sys.fg.tertiary' : 'sys.interactive.subtle',
         },
       },
       rangeMid: {
         style: {
-          backgroundColor: 'sys.interactive.moderate',
-          color: 'sys.interactive.bold',
           '&:hover, &:focus-visible': {
             backgroundColor: 'sys.interactive.muted',
             color: 'sys.interactive.minimal',
           },
+          backgroundColor: 'sys.interactive.moderate',
+          color: 'sys.interactive.bold',
         },
       },
+      style: {
+        color: 'sys.fg.tertiary',
+      },
     },
   };
 
@@ -117,31 +117,31 @@ const buttonStyles = ({ today, selection, preview, selectable, currentMonth }: D
 };
 
 const DatePickerDay = {
-  parts: ['day', 'selection'],
   baseStyle(props: DatePickerDayViewProps) {
-    const { today, selectable } = props;
+    const { selectable, today } = props;
 
     return {
-      text: {
-        border: today ? '1.5px solid' : undefined,
-        width: '40',
-        height: '32',
-        borderRadius: '8',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        ...textStyle(props),
-      },
       day: {
         _focusVisible: {
-          outline: 'none',
           boxShadow: 'none',
+          outline: 'none',
         },
         cursor: !selectable ? 'default' : undefined,
         ...buttonStyles(props),
         ...selectionBorder(props),
       },
+      text: {
+        alignItems: 'center',
+        border: today ? '1.5px solid' : undefined,
+        borderRadius: '8',
+        display: 'flex',
+        height: '32',
+        justifyContent: 'center',
+        width: '40',
+        ...textStyle(props),
+      },
     };
   },
+  parts: ['day', 'selection'],
 };
 export default DatePickerDay;

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -32,23 +32,23 @@ export interface DatePickerDayViewProps {
   children: ReactNode;
 }
 const DatePickerDayView = ({
+  children,
+  currentMonth,
   onClick,
   onMouseEnter,
+  preview,
   selectable,
   selection,
   showOutsideDays,
-  currentMonth,
   today,
-  preview,
-  children,
 }: DatePickerDayViewProps) => {
   const { day, text } = useMultiStyleConfig('DatePickerDay', {
-    today,
+    currentMonth,
+    preview,
     selectable,
     selection,
-    preview,
     showOutsideDays,
-    currentMonth,
+    today,
   });
   const ariaProps: BoxProps = {};
 
@@ -62,12 +62,12 @@ const DatePickerDayView = ({
     <Box
       {...ariaProps}
       as="button"
-      role="option"
       disabled={!selectable}
-      sx={day}
-      onMouseEnter={onMouseEnter}
-      onFocus={onMouseEnter}
       onClick={onClick}
+      onFocus={onMouseEnter}
+      onMouseEnter={onMouseEnter}
+      role="option"
+      sx={day}
     >
       <Text sx={text}>{children}</Text>
     </Box>
@@ -78,15 +78,15 @@ export { DatePickerDayContext };
 
 const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
   const {
+    onPreview,
+    onSelect,
     preview,
     selectable,
     selected,
-    onPreview,
     showOutsideMonths: showOutsideDays,
-    onSelect,
     today,
   } = useDatePickerContext();
-  const { viewDate, onPreviousMonth, onNextMonth } = useDatePickerDayContext();
+  const { onNextMonth, onPreviousMonth, viewDate } = useDatePickerDayContext();
   const { from: dateSelectableFrom, to: dateSelectableTo } = selectable || {};
   const { from: dateSelectedFrom, to: dateSelectedTo } = selected || {};
 
@@ -142,14 +142,14 @@ const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
   }
   return (
     <DatePickerDayView
-      today={today.equals(viewDate.set({ day: n - dayOfWeek + 1 }).startOf('day'))}
-      preview={preview}
+      currentMonth={isCurrentMonth}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
+      preview={preview}
       selectable={isSelectable}
-      currentMonth={isCurrentMonth}
-      showOutsideDays={showOutsideDays}
       selection={selection}
+      showOutsideDays={showOutsideDays}
+      today={today.equals(viewDate.set({ day: n - dayOfWeek + 1 }).startOf('day'))}
     >
       {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n - 1)}
       {isCurrentMonth && n - dayOfWeek + 1}

package/src/Components/DatePicker/DatePickerFooter.tsx

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

package/src/Components/DatePicker/DatePickerGrid.tsx

@@ -4,7 +4,7 @@ import Box, { BoxProps } from '../Box/Box';
 type Props = BoxProps;
 
 const DatePickerGrid: React.FunctionComponent<Props> = (props: Props) => {
-  return <Box display="grid" {...props} gridTemplateColumns="repeat(7, 2.5rem)" gridAutoRows="2rem" gridRowGap="4" />;
+  return <Box display="grid" {...props} gridAutoRows="2rem" gridRowGap="4" gridTemplateColumns="repeat(7, 2.5rem)" />;
 };
 
 export default DatePickerGrid;