@bitrise/bitkit 13.89.0 → 13.91.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.89.0",
+  "version": "13.91.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Avatar/Avatar.theme.ts

@@ -1,66 +1,237 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import { AvatarSizes } from './Avatar';
-
-const BACKGROUND_COLORS = [
-  '#68442c',
-  '#86d641',
-  '#a775db',
-  '#df5ac3',
-  '#46bee8',
-  '#63c99a',
-  '#19937c',
-  '#ed544c',
-  '#ff931e',
-  '#107ec1',
-  '#48e1ed',
-  '#743da5',
-  '#f9d128',
-  '#ff931e',
-  '#9e4b39',
-  '#b51c98',
-  '#b20202',
-  '#bf8a66',
-  '#2c3f50',
-  '#441f62',
-  '#0c5b4c',
-  '#391401',
-  '#27ae61',
-  '#ef7bef',
+import { rem } from '../../utils/utils';
+import { AvatarSizes, AvatarVariant } from './Avatar';
+
+const COLORS = [
+  {
+    backgroundColor: 'sys/neutral/subtle',
+    color: 'sys/neutral/strong',
+  },
+  {
+    backgroundColor: 'sys/success/subtle',
+    color: 'sys/success/strong',
+  },
+  {
+    backgroundColor: 'sys/warning/subtle',
+    color: 'sys/warning/strong',
+  },
+  {
+    backgroundColor: 'sys/orange/subtle',
+    color: 'sys/orange/strong',
+  },
+  {
+    backgroundColor: 'sys/info/subtle',
+    color: 'sys/info/strong',
+  },
+  {
+    backgroundColor: 'sys/critical/subtle',
+    color: 'sys/critical/strong',
+  },
+  {
+    backgroundColor: 'sys/interactive/subtle',
+    color: 'sys/interactive/strong',
+  },
+  {
+    backgroundColor: 'sys/turquoise/subtle',
+    color: 'sys/turquoise/strong',
+  },
 ];
 
-const getSize = (size: AvatarSizes) => {
-  const sizeAsNumber = Number(size);
-  const fontSizes = {
-    16: '9px',
-    24: '1',
-    32: '3',
-    40: '3',
+const getStyleForUserVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '12',
+    32: '16',
+    40: '24',
+    48: '24',
+    64: '12',
+    128: '24',
+  };
+
+  return {
+    borderRadius: borderRadius[size],
+  };
+};
+
+const getStyleForWorkspaceVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '24',
+    32: '8',
+    40: '8',
+    48: '12',
+    64: '12',
+    128: '24',
+  };
+
+  return {
+    borderRadius: borderRadius[size],
+  };
+};
+
+const getStyleForBrandVariant = (size: AvatarSizes) => {
+  const style = {
+    24: {
+      borderRadius: '4',
+      svg: {
+        height: '16',
+        width: '16',
+      },
+    },
+    32: {
+      borderRadius: '8',
+      svg: {
+        height: '20',
+        width: '20',
+      },
+    },
+    40: {
+      borderRadius: '8',
+      svg: {
+        height: '24',
+        width: '24',
+      },
+    },
+    48: {
+      borderRadius: '12',
+      svg: {
+        height: '32',
+        width: '32',
+      },
+    },
+    64: {
+      borderRadius: '12',
+      svg: {
+        height: '48',
+        width: '48',
+      },
+    },
+    128: {
+      borderRadius: '12',
+      svg: {
+        height: '96',
+        width: '96',
+      },
+    },
+  };
+
+  return {
+    ...style[size],
+  };
+};
+
+const getStyleForLettersVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '12',
+    32: '8',
+    40: '8',
+    48: '12',
+    64: '12',
+    128: '12',
+  };
+
+  return {
+    borderRadius: borderRadius[size],
+    padding: size === '128' ? '16' : undefined,
+  };
+};
+
+const getStyleForProjectVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '8',
+    32: '8',
+    40: '8',
+    48: '12',
+    64: '12',
+    128: '24',
+  };
+
+  return {
+    borderRadius: borderRadius[size],
+  };
+};
+
+const getStyleForStepVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '4',
+    32: '4',
+    40: '4',
     48: '4',
-    64: '5',
-    96: '7',
-    128: '8',
+    64: '8',
+    128: '12',
   };
 
   return {
-    fontSize: fontSizes[sizeAsNumber as keyof typeof fontSizes],
-    height: `${sizeAsNumber / 16}rem`,
-    width: `${sizeAsNumber / 16}rem`,
+    borderRadius: borderRadius[size],
   };
 };
 
+const getSizeBasedTextStyle = (size: AvatarSizes) => {
+  const textStyles = {
+    24: 'heading/h5',
+    32: 'heading/h3',
+    40: 'heading/h2',
+    48: 'heading/h1',
+    64: 'display/sm',
+    128: 'display/lg',
+  };
+
+  return {
+    textStyle: textStyles[size],
+    fontWeight: 'bold',
+  };
+};
+
+const getStyleBySizeAndType = (size: AvatarSizes, variant: AvatarVariant) => {
+  switch (variant) {
+    case 'user':
+      return {
+        ...getStyleForUserVariant(size),
+      };
+    case 'workspace':
+      return {
+        ...getStyleForWorkspaceVariant(size),
+      };
+    case 'brand':
+      return {
+        ...getStyleForBrandVariant(size),
+      };
+    case 'letters':
+      return {
+        ...getStyleForLettersVariant(size),
+      };
+    case 'project':
+      return {
+        ...getStyleForProjectVariant(size),
+      };
+    case 'step':
+      return {
+        ...getStyleForStepVariant(size),
+      };
+  }
+};
+
 const AvatarTheme: ComponentStyleConfig = {
-  baseStyle: ({ name, size, src }) => {
-    const str = name.toUpperCase();
-    const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
+  baseStyle: ({ name, variant, size }) => {
+    let colors = {};
+    if (name) {
+      const str = name.toUpperCase();
+      const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
+      colors = COLORS[seed % COLORS.length];
+    } else if (variant === 'brand') {
+      colors = { backgroundColor: 'sys/neutral/subtle', color: 'text/secondary' };
+    }
 
     return {
       container: {
-        backgroundColor: src ? 'transparent' : BACKGROUND_COLORS[seed % BACKGROUND_COLORS.length],
-        color: 'neutral.100',
-        ...getSize(size),
+        ...colors,
+        overflow: 'hidden',
+        height: rem(size),
+        width: rem(size),
+        ...getSizeBasedTextStyle(size),
+        ...getStyleBySizeAndType(size, variant),
       },
     };
   },
+  parts: ['container'],
 };
 
 export default AvatarTheme;

package/src/Components/Avatar/Avatar.tsx

@@ -1,10 +1,24 @@
 import { Avatar as ChakraAvatar, AvatarProps as ChakraAvatarProps, forwardRef } from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
-export type AvatarSizes = '16' | '24' | '32' | '40' | '48' | '64' | '96' | '128';
+export type AvatarSizes = '24' | '32' | '40' | '48' | '64' | '128';
+export type AvatarVariant = 'user' | 'workspace' | 'brand' | 'letters' | 'project' | 'step';
 
-export interface AvatarProps extends ChakraAvatarProps {
-  size?: AvatarSizes;
-}
+export type AvatarProps = (
+  | {
+      iconName: TypeIconName;
+      name?: never;
+      size?: AvatarSizes;
+      variant?: 'brand';
+    }
+  | {
+      iconName?: never;
+      name: string;
+      size?: AvatarSizes;
+      variant?: 'user' | 'workspace' | 'letters' | 'project' | 'step';
+    }
+) &
+  ChakraAvatarProps;
 
 const getInitials = (name: string) => {
   if (name.length < 3) {
@@ -16,8 +30,15 @@ const getInitials = (name: string) => {
   return `${nameArray[0]}${nameArray[nameArray.length - 1]}`;
 };
 
-const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => (
-  <ChakraAvatar getInitials={getInitials} borderRadius="8" size="32" {...props} ref={ref} />
-));
+const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => {
+  const { iconName, variant = 'user', size = '32', ...rest } = props;
+
+  let icon;
+  if (iconName) {
+    icon = <Icon color="sys/neutral/strong" name={iconName} />;
+  }
+
+  return <ChakraAvatar getInitials={getInitials} icon={icon} size={size} variant={variant} {...rest} ref={ref} />;
+});
 
 export default Avatar;

package/src/Components/DatePicker/DatePicker.context.ts

@@ -1,8 +1,10 @@
 import { createContext } from '@chakra-ui/react-utils';
 import { DateTime } from 'luxon';
 import { DateRange } from './useDateRange';
+import type { DatePickerDayViewProps } from './DatePickerDay';
 
 interface Context {
+  dayTooltip?: DatePickerDayViewProps['tooltip'];
   selectable?: DateRange;
   selected?: DateRange;
   today: DateTime;

package/src/Components/DatePicker/DatePicker.tsx

@@ -14,11 +14,13 @@ import DatePickerMonthSelector from './DatePickerMonthSelector';
 import useDateRange, { DateRange } from './useDateRange';
 import useViewDate from './useViewDate';
 import DatePickerFooter from './DatePickerFooter';
+import { DatePickerDayViewProps } from './DatePickerDay';
 
 export { useDateRange, DateRange };
 
 export type DatePickerProps = {
   children: React.ReactNode;
+  dayTooltip?: DatePickerDayViewProps['tooltip'];
   selectable?: DateRange;
   onClose: () => void;
   onClear?: () => void;
@@ -42,7 +44,18 @@ export type DatePickerProps = {
  * range selection.
  */
 const DatePicker = (props: DatePickerProps) => {
-  const { children, mode, onApply, onClear, onClose, selectable, selected, variant = 'default', visible } = props;
+  const {
+    children,
+    dayTooltip,
+    mode,
+    onApply,
+    onClear,
+    onClose,
+    selectable,
+    selected,
+    variant = 'default',
+    visible,
+  } = props;
 
   const { isMobile } = useResponsive();
   const today = DateTime.now().startOf('day');
@@ -162,6 +175,7 @@ const DatePicker = (props: DatePickerProps) => {
 
   const currentSelected = useDateRange([dateFrom, dateTo]);
   const ctx = useObjectMemo({
+    dayTooltip,
     onPreview: handlePreview,
     onSelect: handleSelect,
     preview,

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -4,6 +4,7 @@ import { BoxProps, useMultiStyleConfig } from '@chakra-ui/react';
 import { createContext } from '@chakra-ui/react-utils';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
+import Tooltip from '../Tooltip/Tooltip';
 import { useDatePickerContext } from './DatePicker.context';
 
 // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64995
@@ -21,7 +22,9 @@ interface Context {
   viewDate: DateTime;
 }
 export interface DatePickerDayViewProps {
+  tooltip?(day: Pick<DatePickerDayViewProps, 'selectable' | 'date'>): string | undefined;
   onClick: () => void;
+  date: DateTime;
   onMouseEnter: () => void;
   selectable: boolean;
   today: boolean;
@@ -34,6 +37,8 @@ export interface DatePickerDayViewProps {
 const DatePickerDayView = ({
   children,
   currentMonth,
+  date,
+  tooltip,
   onClick,
   onMouseEnter,
   preview,
@@ -58,19 +63,24 @@ const DatePickerDayView = ({
   } else {
     ariaProps.tabIndex = -1;
   }
+
+  const tooltipText = tooltip?.({ selectable, date });
+
   return (
-    <Box
-      {...ariaProps}
-      as="button"
-      disabled={!selectable}
-      onClick={onClick}
-      onFocus={onMouseEnter}
-      onMouseEnter={onMouseEnter}
-      role="option"
-      sx={day}
-    >
-      <Text sx={text}>{children}</Text>
-    </Box>
+    <Tooltip label={tooltipText} isDisabled={!tooltipText}>
+      <Box
+        {...ariaProps}
+        as="button"
+        disabled={!selectable}
+        onClick={onClick}
+        onFocus={onMouseEnter}
+        onMouseEnter={onMouseEnter}
+        role="option"
+        sx={day}
+      >
+        <Text sx={text}>{children}</Text>
+      </Box>
+    </Tooltip>
   );
 };
 const [DatePickerDayContext, useDatePickerDayContext] = createContext<Context>();
@@ -80,6 +90,7 @@ const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
   const {
     onPreview,
     onSelect,
+    dayTooltip,
     preview,
     selectable,
     selected,
@@ -143,6 +154,7 @@ const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
   return (
     <DatePickerDayView
       currentMonth={isCurrentMonth}
+      date={date}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       preview={preview}
@@ -150,6 +162,7 @@ const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
       selection={selection}
       showOutsideDays={showOutsideDays}
       today={today.equals(viewDate.set({ day: n - dayOfWeek + 1 }).startOf('day'))}
+      tooltip={dayTooltip}
     >
       {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n - 1)}
       {isCurrentMonth && n - dayOfWeek + 1}

package/src/Components/Filter/Filter.storyData.ts

@@ -56,6 +56,7 @@ export const FILTER_STORY_DATA: FilterData = {
     categoryName: 'Date',
     categoryNamePlural: 'dates',
     isMultiple: true,
+    dayTooltip: ({ date }) => (date > DateTime.now() ? 'Date must be in the past' : undefined),
     selectable: new DateRange(DateTime.now().minus({ days: 15 }), DateTime.now()),
     type: 'dateRange',
   },

package/src/Components/Filter/Filter.types.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { TypeIconName } from '../Icon/Icon';
-import { DateRange } from '../DatePicker/DatePicker';
+import { DatePickerProps, DateRange } from '../DatePicker/DatePicker';
 
 export type FilterType = 'dateRange' | 'search' | 'select' | 'switch' | 'tag';
 
@@ -28,11 +28,13 @@ export type FilterCategoryProps = {
   | {
       type: 'dateRange';
       selectable?: DateRange;
+      dayTooltip?: DatePickerProps['dayTooltip'];
       isMultiple: true;
     }
   | {
       type?: Exclude<FilterType, 'dateRange'>;
       selectable?: never;
+      dayTooltip?: never;
     }
 );
 

package/src/Components/Filter/FilterDate/FilterDate.tsx

@@ -59,6 +59,7 @@ const FilterDate = (props: FilterDateProps) => {
       onApply={onDateRangeApply}
       onClear={value?.length ? onClearClick : undefined}
       onClose={onClose}
+      dayTooltip={data.date_range.dayTooltip}
       selected={selectedRange}
       visible={isOpen}
       mode="range"