@bitrise/bitkit 13.6.0 → 13.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.6.0",
+  "version": "13.8.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -33,7 +33,7 @@
     "@chakra-ui/theme": "^3.3.1",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@chakra-ui/utils": "^2.0.15",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.0.18",
@@ -42,8 +42,8 @@
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.11.1",
-    "react-imask": "^7.4.0",
+    "react-focus-lock": "^2.11.2",
+    "react-imask": "^7.5.0",
     "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
@@ -73,12 +73,12 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.2.58",
+    "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "axios": "^1.6.7",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/Components/Button/Button.theme.ts

@@ -2,19 +2,22 @@ import { defineStyle, defineStyleConfig, SystemStyleInterpolation } from '@chakr
 import { rem } from '../../utils/utils';
 import { ButtonProps } from './Button';
 
+const ignoreSsrWarning =
+  '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+
 const baseStyle = defineStyle((props) => {
-  const style: any = {
+  const style: SystemStyleInterpolation = {
     borderRadius: '4',
     '.chakra-button__group[data-attached][data-orientation=horizontal] > &': {
       borderRadius: 0,
-      ':first-child': {
+      [`:first-child${ignoreSsrWarning}`]: {
         borderLeftRadius: '4',
       },
       // Selects the last .chakra-button item even is there an another element after that (eg menu)
       '&:not(:has(~ .chakra-button))': {
         borderRightRadius: '4',
       },
-      '&:not(:first-child)': {
+      [`&:not(:first-child)${ignoreSsrWarning}`]: {
         ...(props.variant.includes('primary')
           ? {
               _before: {

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -1,4 +1,9 @@
-import { Checkbox as ChakraCheckbox, CheckboxProps as ChakraCheckboxProps, forwardRef } from '@chakra-ui/react';
+import {
+  Checkbox as ChakraCheckbox,
+  CheckboxProps as ChakraCheckboxProps,
+  CheckboxIconProps,
+  forwardRef,
+} from '@chakra-ui/react';
 import Icon from '../../Icon/Icon';
 
 type CheckboxInputProps = ChakraCheckboxProps['inputProps'] & {
@@ -9,7 +14,7 @@ export interface CheckboxProps extends Omit<ChakraCheckboxProps, 'icon' | 'iconC
   inputProps?: CheckboxInputProps;
 }
 
-const CustomIcon = (props: any) => {
+const CustomIcon = (props: CheckboxIconProps) => {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const { __css, isChecked, isIndeterminate } = props;
   if (!isChecked) {

package/src/Components/Form/Input/Input.tsx

@@ -157,7 +157,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
                 (Optional)
               </Text>
             }
-            requiredIndicator={null as any}
+            requiredIndicator={null}
           >
             {label}
           </FormLabel>

package/src/Components/Form/Textarea/Textarea.tsx

@@ -112,7 +112,7 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
                 (Optional)
               </Text>
             }
-            requiredIndicator={null as any}
+            requiredIndicator={null}
           >
             {label}
           </FormLabel>

package/src/Components/Select/Select.tsx

@@ -83,7 +83,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
               (Optional)
             </Text>
           }
-          requiredIndicator={null as any}
+          requiredIndicator={null}
         >
           {label}
         </FormLabel>

package/src/Components/components.theme.ts

@@ -1,5 +1,4 @@
 import Alert from './Alert/Alert.theme';
-import Accordion from './AccordionLegacy/Accordion.theme';
 import Avatar from './Avatar/Avatar.theme';
 import Badge from './Badge/Badge.theme';
 import Breadcrumb from './Breadcrumb/Breadcrumb.theme';
@@ -49,7 +48,6 @@ import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
 import TagsInput from './Form/TagsInput/TagsInput.theme';
 
 const components = {
-  Accordion,
   Avatar,
   Badge,
   Breadcrumb,

package/src/index.ts

@@ -163,12 +163,6 @@ export { default as Accordion } from './Components/Accordion/Accordion';
 export type { AccordionItemProps } from './Components/Accordion/AccordionItem';
 export { default as AccordionItem } from './Components/Accordion/AccordionItem';
 
-export type { LegacyAccordionProps } from './Components/AccordionLegacy/LegacyAccordion';
-export { default as LegacyAccordion } from './Components/AccordionLegacy/LegacyAccordion';
-
-export type { LegacyAccordionItemProps } from './Components/AccordionLegacy/LegacyAccordionItem';
-export { default as LegacyAccordionItem } from './Components/AccordionLegacy/LegacyAccordionItem';
-
 export type { LightBoxProps } from './Components/LightBox/LightBox';
 export { default as LightBox } from './Components/LightBox/LightBox';
 

package/src/utils/utils.ts

@@ -36,17 +36,3 @@ export function useDebounce<T>(value: T, delay?: number): T {
 
   return debouncedValue;
 }
-
-export function isObject(value: any): boolean {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-export function getTokenValue(tokenString: string, tokenObject: any) {
-  let returnValue = {};
-  try {
-    returnValue = tokenString.split('.').reduce((o, i) => o[i], tokenObject);
-  } catch (e) {
-    returnValue = {};
-  }
-  return isObject(returnValue) ? returnValue : {};
-}

package/src/Components/AccordionLegacy/Accordion.theme.ts

@@ -1,163 +0,0 @@
-import { StyleFunctionProps, SystemStyleObject } from '@chakra-ui/styled-system';
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-
-type ColorObj = {
-  [key: string]: {
-    enabledButton: string;
-    disabledButton: string;
-    enabledIcon: string;
-    disabledIcon: string;
-    hover: string;
-    border: string;
-  };
-};
-
-type VariantObj = {
-  [key: string]: {
-    borderRadius: string;
-    marginBottom: string;
-    border?: string;
-  };
-};
-
-const buttonStyle = {
-  alignItems: 'center',
-  borderBottom: '1px solid',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '16',
-  width: '100%',
-};
-
-const iconStyle = {
-  height: '24',
-  marginLeft: '16',
-  width: '24',
-};
-
-const colors: ColorObj = {
-  gray: {
-    border: 'neutral.93',
-    disabledButton: 'neutral.95',
-    disabledIcon: 'currentColor',
-    enabledButton: 'neutral.95',
-    enabledIcon: 'currentColor',
-    hover: 'purple.95',
-  },
-  orange: {
-    border: 'orange.90',
-    disabledButton: 'orange.93',
-    disabledIcon: 'orange.80',
-    enabledButton: 'orange.93',
-    enabledIcon: 'orange.10',
-    hover: 'orange.93',
-  },
-  white: {
-    border: 'neutral.93',
-    disabledButton: 'neutral.100',
-    disabledIcon: 'currentColor',
-    enabledButton: 'neutral.100',
-    enabledIcon: 'currentColor',
-    hover: 'purple.95',
-  },
-};
-
-const variants: VariantObj = {
-  flat: {
-    borderRadius: '0',
-    marginBottom: '16',
-  },
-  legacy: {
-    borderRadius: '8',
-    marginBottom: '16',
-  },
-};
-
-const LegacyBaseStyle: ({
-  colorScheme,
-  variant,
-}: Pick<StyleFunctionProps, 'colorScheme' | 'variant'>) => SystemStyleObject = ({ colorScheme, variant }) => ({
-  disabledButton: {
-    ...buttonStyle,
-    background: colors[colorScheme].disabledButton,
-    borderColor: colors[colorScheme].border,
-    borderRadius: variants[variant].borderRadius,
-    cursor: 'default',
-  },
-  disabledIcon: {
-    ...iconStyle,
-    color: colors[colorScheme].disabledIcon,
-    opacity: '0.4',
-    transform: 'none',
-  },
-  enabledButton: {
-    ...buttonStyle,
-    _expanded: {
-      borderBottomLeftRadius: '0',
-      borderBottomRightRadius: '0',
-    },
-    _hover: {
-      background: colors[colorScheme].hover,
-    },
-    background: colors[colorScheme].enabledButton,
-    borderColor: colors[colorScheme].border,
-    borderRadius: variants[variant].borderRadius,
-  },
-  enabledIcon: {
-    ...iconStyle,
-    color: colors[colorScheme].enabledIcon,
-  },
-  item: {
-    _last: {
-      marginBottom: 0,
-    },
-    border: variants[variant].border ?? '1px solid',
-    borderColor: colors[colorScheme].border,
-    borderRadius: variants[variant].borderRadius,
-    marginBottom: variants[variant].marginBottom,
-  },
-  panel: {
-    padding: '16',
-  },
-});
-
-const BaseStyle: () => SystemStyleObject = () => ({
-  button: {
-    _active: {
-      background: 'neutral.90',
-    },
-    _hover: {
-      background: 'neutral.93',
-    },
-    alignItems: 'center',
-    borderColor: 'neutral.93',
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '16',
-    width: '100%',
-  },
-  icon: {
-    height: '24',
-    marginLeft: '16',
-    width: '24',
-  },
-  item: {
-    borderTop: '1px solid',
-    borderTopColor: 'neutral.90',
-  },
-  panel: {
-    padding: '16',
-  },
-  root: {
-    borderBottom: '1px solid',
-    borderBottomColor: 'neutral.90',
-  },
-});
-
-const AccordionTheme: ComponentStyleConfig = {
-  baseStyle: ({ colorScheme, variant }) => {
-    return variant === 'legacy' || variant === 'flat' ? LegacyBaseStyle({ colorScheme, variant }) : BaseStyle();
-  },
-};
-
-export default AccordionTheme;

package/src/Components/AccordionLegacy/LegacyAccordion.tsx

@@ -1,62 +0,0 @@
-import { Children } from 'react';
-import {
-  Accordion as ChakraAccordion,
-  AccordionProps as ChakraAccordionProps,
-  UseAccordionProps,
-  usePrefersReducedMotion,
-} from '@chakra-ui/react';
-
-type ExpandedIndex = NonNullable<UseAccordionProps['index']>;
-
-export interface LegacyAccordionProps extends Omit<ChakraAccordionProps, 'onChange'> {
-  colorScheme?: 'white' | 'gray' | 'orange';
-  variant?: 'flat' | 'legacy';
-  onChange?: (ids: string[], indexes: number[]) => void;
-}
-
-const getItemIds = (props: LegacyAccordionProps) => {
-  const ids: string[] = [];
-  const items = Children.toArray(props.children);
-  items.forEach((item: any, index: number) => {
-    ids[index] = item?.props?.id;
-  });
-  return ids;
-};
-
-/**
- * Accordions display a list of high-level options that can expand/collapse to reveal more information.
- */
-const LegacyAccordion = (props: LegacyAccordionProps) => {
-  const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
-  const { children, colorScheme, onChange, variant, ...rest } = props;
-  const itemIds = getItemIds(props);
-
-  const onAccordionChange = (indexes: ExpandedIndex) => {
-    if (onChange) {
-      const indexArray = Object.values(indexes).sort();
-      onChange(
-        indexArray.map((i: number) => itemIds[i]),
-        indexArray,
-      );
-    }
-  };
-
-  return (
-    <ChakraAccordion
-      allowMultiple
-      colorScheme={colorScheme}
-      onChange={onAccordionChange}
-      reduceMotion={prefersReducedMotion}
-      variant={variant}
-      {...rest}
-    >
-      {children}
-    </ChakraAccordion>
-  );
-};
-
-LegacyAccordion.defaultProps = {
-  colorScheme: 'white',
-  variant: 'legacy',
-};
-export default LegacyAccordion;

package/src/Components/AccordionLegacy/LegacyAccordionItem.tsx

@@ -1,34 +0,0 @@
-import { isValidElement, ReactNode } from 'react';
-import {
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem as ChakraAccordionItem,
-  AccordionItemProps as ChakraAccordionItemProps,
-  AccordionPanel,
-  AccordionPanelProps,
-  useAccordionStyles,
-} from '@chakra-ui/react';
-import Text from '../Text/Text';
-
-export interface LegacyAccordionItemProps extends AccordionPanelProps {
-  buttonContent: ReactNode;
-  children?: ReactNode;
-  id?: ChakraAccordionItemProps['id'];
-}
-
-const LegacyAccordionItem = (props: LegacyAccordionItemProps) => {
-  const { buttonContent, children, id, ...rest } = props;
-  const styles = useAccordionStyles();
-
-  return (
-    <ChakraAccordionItem id={id} sx={styles.item}>
-      <AccordionButton sx={children ? styles.enabledButton : styles.disabledButton}>
-        {isValidElement(buttonContent) ? buttonContent : <Text as="span">{buttonContent}</Text>}
-        <AccordionIcon sx={children ? styles.enabledIcon : styles.disabledIcon} />
-      </AccordionButton>
-      {!!children && <AccordionPanel {...rest}>{children}</AccordionPanel>}
-    </ChakraAccordionItem>
-  );
-};
-
-export default LegacyAccordionItem;