@bitrise/bitkit 9.14.0-alpha-chakra.6 → 9.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.14.0-alpha-chakra.6",
+  "version": "9.14.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -38,11 +38,10 @@
     "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.11.5",
     "@types/react-transition-group": "^4.4.4",
-    "chakra-react-select": "3.3.3",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
     "framer-motion": "^6.3.3",
-    "luxon": "^2.4.0",
+    "luxon": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.3.0",
@@ -78,19 +77,19 @@
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
     "@types/fscreen": "^1.0.1",
-    "@types/jest": "^27.5.1",
+    "@types/jest": "^27.5.0",
     "@types/lodash.sample": "^4.2.7",
     "@types/lodash.shuffle": "^4.2.7",
     "@types/luxon": "^2.3.2",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "^17.0.16",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.4",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios": "^0.27.2",
     "babel-eslint": "^10.0.1",
@@ -100,7 +99,7 @@
     "concurrently": "^7.1.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.15.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",
@@ -108,9 +107,9 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-storybook": "^0.5.11",
-    "eslint-plugin-testing-library": "^5.5.0",
+    "eslint-plugin-testing-library": "^5.3.1",
     "fscreen": "^1.2.0",
-    "glob": "^8.0.2",
+    "glob": "^8.0.1",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
@@ -132,7 +131,7 @@
     "ts-node": "^10.7.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.6.4",
-    "webpack": "^5.72.1"
+    "webpack": "^5.72.0"
   },
   "files": [
     "src",

package/src/Components/Menu/Menu.theme.ts

@@ -3,7 +3,7 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 const MenuTheme: SystemStyleObject = {
   baseStyle: {
     list: {
-      bg: 'neutral.100',
+      backgroundColor: 'neutral.100',
       border: '1px solid',
       borderColor: 'neutral.93',
       borderRadius: '4',
@@ -15,11 +15,11 @@ const MenuTheme: SystemStyleObject = {
       padding: '12',
       paddingRight: '16',
       _focus: {
-        bg: 'neutral.95',
+        backgroundColor: 'neutral.93',
         boxShadow: 'none',
       },
       _active: {
-        bg: 'neutral.93',
+        backgroundColor: 'neutral.90',
       },
     },
   },

package/src/Old/AddonBeam/AddonBeam.tsx

@@ -59,7 +59,7 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
       {isInResponsiveView && !!onHamburgerIconClick && (
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link color="white" onClick={onHamburgerIconClick}>
+          <Link color="neutral.100" onClick={onHamburgerIconClick}>
             <Hamburger active={isHamburgerIconActive} />
           </Link>
         </Flex>
@@ -86,7 +86,7 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
 
         {isBeta && (
           <Flex>
-            <Badge backgroundColor="yellow-3" textColor="grape-5">
+            <Badge backgroundColor="yellow.80" textColor="purple.10">
               BETA
             </Badge>
           </Flex>

package/src/Old/Avatar/Avatar.tsx

@@ -52,7 +52,7 @@ const Avatar: React.FunctionComponent<Props> = (props: Props) => {
     >
       <Flex>
         {memoizedValue.shortHand && (
-          <Text size="3" textColor="white">
+          <Text size="3" textColor="neutral.100">
             {memoizedValue.shortHand}
           </Text>
         )}

package/src/Old/Base/Base.tsx

@@ -4,77 +4,59 @@ import './Base.css';
 
 export type TypeBorderRadius = 'x1' | 'x2' | 'x4' | 'rounded';
 
-export type TypeColors =
-  | 'black'
-  | 'white'
-  | 'gray-1'
-  | 'gray-2'
-  | 'gray-3'
-  | 'gray-4'
-  | 'gray-5'
-  | 'gray-6'
-  | 'gray-7'
-  | 'gray-8'
-  | 'aqua-1'
-  | 'aqua-2'
-  | 'aqua-3'
-  | 'aqua-4'
-  | 'aqua-5'
-  | 'grape-1'
-  | 'grape-2'
-  | 'grape-3'
-  | 'grape-4'
-  | 'grape-5'
-  | 'eggplant'
-  | 'red-1'
-  | 'red-2'
-  | 'red-3'
-  | 'red-4'
-  | 'red-5'
-  | 'orange-1'
-  | 'orange-2'
-  | 'orange-3'
-  | 'orange-4'
-  | 'orange-5'
-  | 'yellow-1'
-  | 'yellow-2'
-  | 'yellow-3'
-  | 'yellow-4'
-  | 'yellow-5'
-  | 'green-1'
-  | 'green-2'
-  | 'green-3'
-  | 'green-4'
-  | 'green-5'
-  | 'blue-1'
-  | 'blue-2'
-  | 'blue-3'
-  | 'blue-4'
-  | 'blue-5'
-  | 'darkblue-1'
-  | 'darkblue-2'
-  | 'darkblue-3'
-  | 'darkblue-4'
-  | 'darkblue-5'
-  | 'violet-1'
-  | 'violet-2'
-  | 'violet-3'
-  | 'violet-4'
-  | 'violet-5'
-  | 'neutral-40'
-  | 'neutral-95'
-  | 'purple-40'
-  | 'purple-95'
-  | 'red-40'
-  | 'red-95'
-  | 'yellow-40'
-  | 'yellow-95'
-  | 'green-40'
-  | 'green-95'
-  | 'turquoise-40'
-  | 'turquoise-95'
-  | 'blue-40'
-  | 'blue-95';
+const newToOld = {
+  'neutral.100': 'white',
+  'neutral.10': 'black',
+  'neutral.95': 'gray-1',
+  'neutral.93': 'gray-2',
+  'neutral.90': 'gray-3',
+  'neutral.80': 'gray-4',
+  'neutral.70': 'gray-5',
+  'neutral.50': 'gray-6',
+  'neutral.40': 'gray-7',
+  'neutral.30': 'gray-8',
+  'turquoise.95': 'aqua-1',
+  'turquoise.80': 'aqua-2',
+  'turquoise.70': 'aqua-3',
+  'turquoise.60': 'aqua-4',
+  'turquoise.50': 'aqua-5',
+  'purple.95': 'grape-1',
+  'purple.70': 'grape-2',
+  'purple.50': 'grape-3',
+  'purple.30': 'grape-4',
+  'purple.10': 'grape-5',
+  'purple.40': 'eggplant',
+  'red.93': 'red-1',
+  'red.70': 'red-2',
+  'red.50': 'red-3',
+  'red.40': 'red-4',
+  'red.30': 'red-5',
+  'yellow.95': 'yellow-1',
+  'yellow.90': 'yellow-2',
+  'yellow.80': 'yellow-3',
+  'yellow.70': 'yellow-4',
+  'yellow.40': 'yellow-5',
+  'green.95': 'green-1',
+  'green.80': 'green-2',
+  'green.60': 'green-3',
+  'green.50': 'green-4',
+  'green.40': 'green-5',
+  'blue.93': 'blue-1',
+  'blue.95': 'blue-95',
+  'blue.70': 'blue-2',
+  'blue.50': 'blue-3',
+  'blue.40': 'blue-4',
+  'blue.30': 'blue-5',
+  'blue.60': 'darkblue-2',
+  'blue.20': 'darkblue-4',
+  'blue.10': 'darkblue-5',
+  'purple.20': 'violet-5',
+  'red.95': 'red-95',
+  'orange-3': 'orange-3',
+  'turquoise.40': 'turquoise-40',
+};
+
+export type TypeColors = keyof typeof newToOld;
 
 export type TypeSizes = 'x0' | 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x8' | 'x10' | 'x12' | 'x16';
 
@@ -179,9 +161,9 @@ const Base: React.FunctionComponent<Props> = (props: Props) => {
     {
       'Base--absolute': absolute === true,
       [`Base--absolute-${absolute}`]: typeof absolute === 'string',
-      [`Base--background-color-${backgroundColor}`]: backgroundColor,
+      [`Base--background-color-${newToOld[backgroundColor!]}`]: backgroundColor,
       [`Base--border-radius-${borderRadius}`]: borderRadius,
-      [`Base--border-color-${borderColor}`]: borderColor,
+      [`Base--border-color-${newToOld[borderColor!]}`]: borderColor,
       [`Base--border-width-${borderWidth}`]: borderWidth,
       'Base--clickable': clickable,
       'Base--container': container,
@@ -191,7 +173,7 @@ const Base: React.FunctionComponent<Props> = (props: Props) => {
       [`Base--overflow-${overflow}`]: overflow,
       [`Base--padding-horizontal-${paddingHorizontal}`]: paddingHorizontal,
       [`Base--padding-vertical-${paddingVertical}`]: paddingVertical,
-      [`Base--text-color-${textColor}`]: textColor,
+      [`Base--text-color-${newToOld[textColor!]}`]: textColor,
     },
     className,
   );

package/src/Old/Checkbox/Checkbox.tsx

@@ -21,7 +21,7 @@ const Checkbox: React.FunctionComponent<Props> = (props: Props) => {
       </Flex>
 
       {children && (
-        <Flex grow initial="none" textColor="grape-5">
+        <Flex grow initial="none" textColor="purple.10">
           {children}
         </Flex>
       )}

package/src/Old/DatePicker/DatePickerMonth.tsx

@@ -59,7 +59,7 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
 
       <DatePickerGrid margin="x1">
         {daysOfTheWeek.map((day) => (
-          <Text align="middle" key={day} paddingVertical="x4" size="2" textColor="gray-5" uppercase>
+          <Text align="middle" key={day} paddingVertical="x4" size="2" textColor="neutral.70" uppercase>
             {day}
           </Text>
         ))}

package/src/Old/Dropdown/DropdownMenuItemGroup.tsx

@@ -9,7 +9,7 @@ export interface Props extends FlexProps {
 
 const DropdownMenuItemGroup: React.FunctionComponent<Props> = ({ text, children, className, ...rest }: Props) => (
   <Flex className={classnames('DropdownMenu__group', className)} {...rest}>
-    <Text className="DropdownMenu__group-text" size="2" textColor="gray-6">
+    <Text className="DropdownMenu__group-text" size="2" textColor="neutral.50">
       {text}
     </Text>
     {children}

package/src/Old/Input/InputInlineHelp.tsx

@@ -5,7 +5,7 @@ export type Props = TextProps;
 
 /** Provides specific styling for an inline input label */
 const InputInlineHelp: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text margin="x2" size="2" textColor="gray-6" {...props} />;
+  return <Text margin="x2" size="2" textColor="neutral.50" {...props} />;
 };
 
 export default InputInlineHelp;

package/src/Old/Input/InputLabel.tsx

@@ -8,7 +8,7 @@ export type Props = TextProps;
  * input.
  */
 const InputLabel: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text {...props} Component="label" margin="x1" size="3" textColor="grape-5" weight="bold" />;
+  return <Text {...props} Component="label" margin="x1" size="3" textColor="purple.10" weight="bold" />;
 };
 
 export default InputLabel;

package/src/Old/Link/Link.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import Base, { Props as BaseProps } from '../Base/Base';
 import './Link.css';
 
-export type TypeLinkColor = 'grape-3' | 'grape-5' | 'gray-1' | 'gray-5' | 'white';
+export type TypeLinkColor = 'purple.50' | 'purple.10' | 'neutral.95' | 'neutral.70' | 'neutral.100';
 
 export interface Props extends BaseProps {
   Component?: BaseProps['Component'];

package/src/Old/Modal/Modal.tsx

@@ -111,7 +111,7 @@ const Modal: React.FunctionComponent<Props> = (props: Props) => {
 };
 
 Modal.defaultProps = {
-  backgroundColor: 'white',
+  backgroundColor: 'neutral.100',
 };
 
 export default Modal;

package/src/Old/Modal/ModalHeader.tsx

@@ -34,7 +34,7 @@ const ModalHeader: React.FunctionComponent<Props> = (props: Props) => {
       </Flex>
       <Flex padding="x4">
         {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        <Link clickable color="grape-5" onClick={onClose}>
+        <Link clickable color="purple.10" onClick={onClose}>
           <Icon name="CloseSmall" />
         </Link>
       </Flex>

package/src/Old/Modal/ModalHeaderProgress.tsx

@@ -15,7 +15,7 @@ const ModalHeaderProgress: React.FunctionComponent<Props> = (props: Props) => {
 
   return (
     <Flex {...rest} className="ModalHeader__progress">
-      <ProgressBar foregroundColor="eggplant" height="4px" progress={progress} />
+      <ProgressBar foregroundColor="purple.40" height="4px" progress={progress} />
     </Flex>
   );
 };

package/src/Old/Modal/ModalTitle.tsx

@@ -7,7 +7,7 @@ export type Props = TextProps;
  * Modal specific styled text to appear as a title.
  */
 const ModalTitle: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text {...props} letterSpacing="x1" margin="x4" size="5" textColor="grape-5" weight="bold" />;
+  return <Text {...props} letterSpacing="x1" margin="x4" size="5" textColor="purple.10" weight="bold" />;
 };
 
 export default ModalTitle;

package/src/Old/Placement/PlacementArrowPropsContext.ts

@@ -3,7 +3,7 @@ import { PopperArrowProps } from 'react-popper';
 import { TypeColors } from '../Base/Base';
 
 export const PlacementArrowPropsContext = createContext<PopperArrowProps & { backgroundColor?: TypeColors }>({
-  backgroundColor: 'gray-1',
+  backgroundColor: 'neutral.95',
   ref: () => {},
   style: {},
 });

package/src/Old/Placement/PlacementPopper.tsx

@@ -181,7 +181,7 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
 };
 
 PlacementPopper.defaultProps = {
-  backgroundColor: 'white',
+  backgroundColor: 'neutral.100',
   borderRadius: 'x2',
 };
 

package/src/Old/RadioButton/RadioButton.tsx

@@ -19,7 +19,7 @@ const RadioButton: React.FunctionComponent<Props> = (props: Props) => {
         </Flex>
       </Flex>
 
-      {children && <Flex textColor="grape-5">{children}</Flex>}
+      {children && <Flex textColor="purple.10">{children}</Flex>}
     </Flex>
   );
 };

package/src/Old/Sidebar/SidebarSubMenuItem.tsx

@@ -47,7 +47,7 @@ const SidebarSubMenuItem: React.FunctionComponent<Props> = (props: Props) => {
     >
       {icon && (
         <Flex>
-          <Icon name={icon} textColor="grape-2" />
+          <Icon name={icon} textColor="purple.70" />
         </Flex>
       )}
 

package/src/Old/Skeleton/Skeleton.tsx

@@ -17,7 +17,7 @@ export interface Props extends BaseProps {
  * it is not restricted to just skeleton components.
  */
 const Skeleton: React.FunctionComponent<Props> = (props: Props) => {
-  const { active, color = 'white', ...rest } = props;
+  const { active, color = 'neutral.100', ...rest } = props;
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   /* @ts-ignore */
   const rgb = rgbMap[color];
@@ -29,7 +29,7 @@ const Skeleton: React.FunctionComponent<Props> = (props: Props) => {
 };
 
 Skeleton.defaultProps = {
-  color: 'white',
+  color: 'neutral.100',
 };
 
 export default Skeleton;

package/src/Old/Skeleton/SkeletonBox.tsx

@@ -20,7 +20,7 @@ const SkeletonBox: React.FunctionComponent<Props> = (props: Props) => {
 };
 
 SkeletonBox.defaultProps = {
-  backgroundColor: 'gray-2',
+  backgroundColor: 'neutral.93',
 };
 
 export default SkeletonBox;

package/src/Old/Table/TableCell.tsx

@@ -17,7 +17,7 @@ const TableCell: React.FunctionComponent<Props> = (props: Props) => {
     'Table__cell--shrink': shrink,
   });
 
-  return <Text {...rest} Component="td" className={classes} textColor="gray-7" />;
+  return <Text {...rest} Component="td" className={classes} textColor="neutral.40" />;
 };
 
 export default TableCell;

package/src/Old/Tooltip/Tooltip.tsx

@@ -35,11 +35,11 @@ export interface Props extends BaseProps {
  */
 const Tooltip: React.FunctionComponent<Props> = (props: Props) => {
   const {
-    backgroundColor = 'black',
+    backgroundColor = 'neutral.10',
     borderRadius = 'x1',
     children,
     placement = 'top',
-    textColor = 'gray-1',
+    textColor = 'neutral.95',
     title,
     visible: controlledVisible,
     timeout = transitionDurationFast,

package/src/index.ts

@@ -28,9 +28,3 @@ export { default as Card } from './Components/Card/Card';
 
 export type { CardContentProps } from './Components/Card/CardContent';
 export { default as CardContent } from './Components/Card/CardContent';
-
-export type { SelectProps } from './Components/Select/Select';
-export { default as Select } from './Components/Select/Select';
-
-export type { DropdownProps } from './Components/Dropdown/Dropdown';
-export { default as Dropdown } from './Components/Dropdown/Dropdown';

package/src/old.ts

@@ -61,6 +61,9 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 export type { Props as DotProps } from './Old/Dot/Dot';
 export { default as Dot } from './Old/Dot/Dot';
 
+export type { Props as DropdownProps } from './Old/Dropdown/Dropdown';
+export { default as Dropdown } from './Old/Dropdown/Dropdown';
+
 export type { Props as DropdownButtonProps } from './Old/Dropdown/DropdownButton';
 export { default as DropdownButton } from './Old/Dropdown/DropdownButton';
 

package/src/theme.ts

@@ -3,7 +3,6 @@ import Card from './Components/Card/Card.theme';
 import Divider from './Components/Divider/Divider.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
-import Select from './Components/Select/Select.theme';
 import Text from './Components/Text/Text.theme';
 
 import colors from './Foundations/Colors/Colors';
@@ -51,7 +50,6 @@ const theme = {
     Divider,
     Link,
     Menu,
-    Select,
     Text,
   },
 };