@bitrise/bitkit 9.14.0 → 9.15.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.14.0",
+  "version": "9.15.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -38,10 +38,11 @@
     "@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.3.2",
+    "luxon": "^2.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.3.0",
@@ -77,19 +78,19 @@
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
     "@types/fscreen": "^1.0.1",
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^27.5.1",
     "@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.44",
-    "@types/react-dom": "^17.0.16",
+    "@types/react": "17.0.45",
+    "@types/react-dom": "^17.0.17",
     "@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.22.0",
-    "@typescript-eslint/parser": "^5.22.0",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios": "^0.27.2",
     "babel-eslint": "^10.0.1",
@@ -99,7 +100,7 @@
     "concurrently": "^7.1.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.14.0",
+    "eslint": "^8.15.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",
@@ -107,9 +108,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.3.1",
+    "eslint-plugin-testing-library": "^5.5.0",
     "fscreen": "^1.2.0",
-    "glob": "^8.0.1",
+    "glob": "^8.0.2",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
@@ -131,7 +132,7 @@
     "ts-node": "^10.7.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.6.4",
-    "webpack": "^5.72.0"
+    "webpack": "^5.72.1"
   },
   "files": [
     "src",

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,69 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import Dropdown from './Dropdown';
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  args: {
+    isDisabled: false,
+    isLoading: false,
+  },
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+    size: {
+      options: ['small', 'medium'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+} as ComponentMeta<typeof Dropdown>;
+
+const buildStatusOptions = [
+  { value: 'all', label: 'All status' },
+  { value: 'successful', label: 'Successful' },
+  { value: 'failed', label: 'Failed' },
+  { value: 'aborted', label: 'Aborted' },
+  {
+    value: 'on_hold',
+    label:
+      'On hold, but has a really long label text for test blah blah lorem ipsum dolor sit amet blah blah lorem ipsum dolor sit amet blah blah lorem ipsum dolor sit amet blah blah lorem ipsum dolor sit amet blah blah lorem ipsum dolor sit amet',
+  },
+];
+
+const flavorOptions = [
+  { value: 'vanilla', label: 'Vanilla' },
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'salted-caramel', label: 'Salted Caramel' },
+];
+
+const groupedOptions = [
+  {
+    label: 'Build status',
+    options: buildStatusOptions,
+  },
+  {
+    label: 'Flavours',
+    options: flavorOptions,
+  },
+];
+
+const Template: ComponentStory<typeof Dropdown> = (props) => <Dropdown {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...Dropdown.defaultProps,
+  options: buildStatusOptions,
+  placeholder: 'Select build status',
+});
+
+export const WithOptionGroups = Template.bind({});
+WithOptionGroups.args = sortObjectByKey({
+  ...Dropdown.defaultProps,
+  options: groupedOptions,
+  placeholder: 'Select something 🤔',
+});

package/src/Components/Dropdown/Dropdown.styles.ts

@@ -0,0 +1,82 @@
+import { ChakraStylesConfig } from 'chakra-react-select';
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import SelectTheme from '../Select/Select.theme';
+
+const controlTextStyle = {
+  cursor: 'default',
+  maxWidth: 'calc(100% - 3rem)',
+  overflow: 'hidden',
+  position: 'absolute',
+  textOverflow: 'ellipsis',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  whiteSpace: 'nowrap',
+};
+
+const getDropdownStyles = (size: 'small' | 'medium', additionalStyle?: SystemStyleObject): ChakraStylesConfig => ({
+  container: (_provided, state) => ({
+    borderRadius: '4',
+    boxShadow: state.isFocused ? 'outline' : 'none',
+    position: 'relative',
+    zIndex: state.isFocused ? '1' : '0',
+    ...additionalStyle,
+  }),
+  control: () => ({
+    display: 'flex',
+    ...SelectTheme.baseStyle.field,
+    ...SelectTheme.sizes[size].field,
+    paddingRight: '8',
+  }),
+  groupHeading: () => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16',
+    color: 'neutral.50',
+    fontSize: '2',
+    lineHeight: '3',
+    paddingX: '16',
+    paddingY: '12',
+    textTransform: 'uppercase',
+    _after: {
+      content: `''`,
+      flex: 1,
+      height: '1px',
+      bg: 'neutral.90',
+    },
+  }),
+  indicatorsContainer: (provided) => ({
+    ...provided,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  }),
+  loadingIndicator: () => ({
+    color: 'neutral.70',
+    width: '16',
+    height: '16',
+    marginRight: '8',
+  }),
+  menu: () => ({
+    position: 'absolute',
+    transform: 'translateY(8px)',
+    width: '100%',
+  }),
+  menuList: (provided) => ({
+    ...provided,
+    borderRadius: '4',
+  }),
+  option: (provided) => ({
+    ...provided,
+    padding: '12',
+  }),
+  placeholder: () => ({
+    ...controlTextStyle,
+  }),
+  singleValue: () => controlTextStyle,
+  valueContainer: () => ({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+});
+
+export default getDropdownStyles;

package/src/Components/Dropdown/Dropdown.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { chakraComponents, ChakraStylesConfig, DropdownIndicatorProps, Props, Select } from 'chakra-react-select';
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import Icon from '../../Old/Icon/Icon';
+import getDropdownStyles from './Dropdown.styles';
+
+export type DropdownProps = Omit<Props, 'defaultValue' | 'onChange'> & {
+  defaultValue?: any;
+  onChange?: ((newValue: any) => void) | undefined;
+  size?: 'small' | 'medium';
+  style?: SystemStyleObject;
+};
+
+const components = {
+  DropdownIndicator: (props: DropdownIndicatorProps) => {
+    return (
+      <chakraComponents.DropdownIndicator {...props}>
+        <Icon name="DropdownArrows" />
+      </chakraComponents.DropdownIndicator>
+    );
+  },
+};
+
+const Dropdown = (props: DropdownProps) => {
+  const { defaultValue, isDisabled, isLoading, onChange, options, placeholder, size = 'medium', style } = props;
+  const chakraStyles: ChakraStylesConfig = getDropdownStyles(size, style);
+
+  const defaultValueWithLabel = defaultValue;
+
+  if (!defaultValue?.label && defaultValue?.text) {
+    defaultValueWithLabel.label = defaultValue.text;
+  }
+
+  const mappedOptions = options?.map((opt: any) => {
+    if (!opt.label && opt.text) {
+      return {
+        ...opt,
+        label: opt.text,
+      };
+    }
+    return opt;
+  });
+
+  const properties: Props = {
+    chakraStyles,
+    components,
+    defaultValue,
+    isDisabled: isDisabled || isLoading,
+    isLoading,
+    isSearchable: false,
+    onChange,
+    options: mappedOptions,
+    placeholder,
+    selectedOptionStyle: 'check',
+  };
+
+  return <Select {...properties} />;
+};
+
+Dropdown.defaultProps = {
+  size: 'medium',
+} as DropdownProps;
+
+export default Dropdown;

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

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

package/src/Components/Select/Select.stories.tsx

@@ -0,0 +1,38 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import Select from './Select';
+
+export default {
+  title: 'Components/Select',
+  component: Select,
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
+} as ComponentMeta<typeof Select>;
+
+const args = {
+  ...Select.defaultProps,
+  isDisabled: false,
+  isInvalid: false,
+  isRequired: false,
+};
+
+const children = (
+  <>
+    <option value="all">All status</option>
+    <option value="successful">Successful</option>
+    <option value="failed">Failed</option>
+    <option value="aborted">Aborted</option>
+    <option value="on_hold">On hold</option>
+  </>
+);
+
+const Template: ComponentStory<typeof Select> = (props) => <Select {...props}>{children}</Select>;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...args,
+  placeholder: 'Select build status',
+});

package/src/Components/Select/Select.theme.ts

@@ -0,0 +1,51 @@
+const SelectTheme = {
+  baseStyle: {
+    field: {
+      appearance: 'none',
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      border: '0.0625rem solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      color: 'purple.10',
+      position: 'relative',
+      width: '100%',
+      _hover: {
+        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+      },
+      _active: {
+        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
+        borderColor: 'neutral.80',
+      },
+      _disabled: {
+        color: 'neutral.70',
+        pointerEvents: 'none',
+      },
+    },
+    icon: {
+      right: '8',
+      _disabled: {
+        opacity: '0.2',
+      },
+    },
+  },
+  sizes: {
+    small: {
+      field: {
+        height: '32',
+        fontSize: '2',
+        paddingLeft: '12',
+        paddingRight: '32',
+      },
+    },
+    medium: {
+      field: {
+        height: '48',
+        fontSize: '3',
+        paddingLeft: '16',
+        paddingRight: '32',
+      },
+    },
+  },
+};
+
+export default SelectTheme;

package/src/Components/Select/Select.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Select as ChakraSelect, SelectProps as ChakraSelectProps } from '@chakra-ui/react';
+import Icon from '../../Old/Icon/Icon';
+
+export interface SelectProps extends ChakraSelectProps {
+  size?: 'small' | 'medium';
+}
+
+const Select = (props: SelectProps) => {
+  return <ChakraSelect icon={<Icon name="DropdownArrows" />} variant="select" {...props} />;
+};
+
+Select.defaultProps = {
+  size: 'medium',
+} as SelectProps;
+
+export default Select;

package/src/Old/Base/Base.tsx

@@ -4,7 +4,7 @@ import './Base.css';
 
 export type TypeBorderRadius = 'x1' | 'x2' | 'x4' | 'rounded';
 
-const newToOld = {
+export const newToOld = {
   'neutral.100': 'white',
   'neutral.10': 'black',
   'neutral.95': 'gray-1',
@@ -54,7 +54,7 @@ const newToOld = {
   'red.95': 'red-95',
   'orange-3': 'orange-3',
   'turquoise.40': 'turquoise-40',
-};
+} as const;
 
 export type TypeColors = keyof typeof newToOld;
 

package/src/Old/Progress/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import { colorMap } from '../variables';
-import Base, { Props as BaseProps, TypeColors } from '../Base/Base';
+import Base, { newToOld, Props as BaseProps, TypeColors } from '../Base/Base';
 import './ProgressBar.css';
 
 export interface Props extends BaseProps {
@@ -37,9 +37,7 @@ const ProgressBar: React.FunctionComponent<Props> = (props: Props) => {
       height={height}
       style={{
         '--ProgressBar--height': height,
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        /* @ts-ignore */
-        '--ProgressBar--stripe-color': stripeColor ? colorMap[stripeColor] : '',
+        '--ProgressBar--stripe-color': stripeColor ? colorMap[newToOld[stripeColor]] : '',
       }}
     >
       <Base

package/src/Old/Skeleton/Skeleton.css

@@ -17,11 +17,11 @@
   background:
     linear-gradient(
       to left,
-      rgba(var(--Skeleton--color), 0),
-      rgba(var(--Skeleton--color), 0.63) 35%,
-      rgba(var(--Skeleton--color), 1) 48%,
-      rgba(var(--Skeleton--color), 0.57) 55%,
-      rgba(var(--Skeleton--color), 0)
+      rgba(255,255, 255, 0),
+      rgba(255,255, 255, 0.63) 35%,
+      rgba(255,255, 255, 1) 48%,
+      rgba(255,255, 255, 0.57) 55%,
+      rgba(255,255, 255, 0)
     );
   pointer-events: none;
 }

package/src/Old/Skeleton/Skeleton.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import Base, { Props as BaseProps, TypeColors } from '../Base/Base';
-import { rgbMap } from '../variables';
+import Base, { Props as BaseProps } from '../Base/Base';
 import './Skeleton.css';
 
 export interface Props extends BaseProps {
   /** Flag to enable/disable the loading behaviour */
   active?: boolean;
-  /** Color of the Skeleton */
-  color?: TypeColors;
 }
 
 /**
@@ -17,19 +14,12 @@ export interface Props extends BaseProps {
  * it is not restricted to just skeleton components.
  */
 const Skeleton: React.FunctionComponent<Props> = (props: Props) => {
-  const { active, color = 'neutral.100', ...rest } = props;
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  /* @ts-ignore */
-  const rgb = rgbMap[color];
+  const { active, ...rest } = props;
   const classes = classnames('Skeleton', {
     'Skeleton--active': active,
   });
 
-  return <Base {...rest} className={classes} style={{ '--Skeleton--color': rgb.toString() }} />;
-};
-
-Skeleton.defaultProps = {
-  color: 'neutral.100',
+  return <Base {...rest} className={classes} />;
 };
 
 export default Skeleton;

package/src/Old/variables.ts

@@ -1,3 +1,4 @@
+import colors from '../Foundations/Colors/Colors';
 import { IconList } from './Icon/tsx';
 
 export const colorWhite = '#FFFFFF';
@@ -204,7 +205,11 @@ export const colorMap = {
   'violet-3': colorViolet3,
   'violet-4': colorViolet4,
   'violet-5': colorViolet5,
-};
+
+  'blue-95': colors.blue[95],
+  'red-95': colors.red[95],
+  'turquoise-40': colors.turquoise[40],
+} as const;
 
 export const rgbMap = {
   white: rgbWhite,

package/src/index.ts

@@ -28,3 +28,9 @@ 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,8 +61,7 @@ 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 OldDropdownProps } 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,6 +3,7 @@ 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';
@@ -50,6 +51,7 @@ const theme = {
     Divider,
     Link,
     Menu,
+    Select,
     Text,
   },
 };