@bitrise/bitkit 9.13.1 → 9.14.0-alpha-chakra.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.13.1",
+  "version": "9.14.0-alpha-chakra.2",
   "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/Button/Button.stories.tsx

@@ -15,4 +15,5 @@ WithProps.args = sortObjectByKey({
   children: 'Button',
   isDanger: false,
   isDisabled: false,
+  isLoading: false,
 });

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

@@ -1,9 +1,37 @@
+const disabledStates = {
+  primary: {
+    _disabled: {
+      bgGradient: 'linear(to-b, neutral.80, neutral.70)',
+      borderColor: 'neutral.70',
+    },
+  },
+  secondary: {
+    _disabled: {
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      borderColor: 'neutral.90',
+      color: 'neutral.70',
+    },
+  },
+  tertiary: {
+    _disabled: {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'neutral.70',
+    },
+  },
+};
+
 const ButtonTheme = {
   baseStyle: {
     border: '0.0625rem solid',
     borderRadius: '4',
     _disabled: {
-      pointerEvents: 'none',
+      cursor: 'not-allowed',
+    },
+    _hover: {
+      _disabled: {
+        bg: 'initial',
+      },
     },
   },
   variants: {
@@ -14,14 +42,13 @@ const ButtonTheme = {
       fontWeight: 'bold',
       _hover: {
         bgGradient: 'linear(to-b, purple.30, purple.10)',
+        ...disabledStates.primary,
       },
       _active: {
         bgGradient: 'linear(to-b, purple.10, purple.10)',
+        ...disabledStates.primary,
       },
-      _disabled: {
-        bgGradient: 'linear(to-b, neutral.80, neutral.70)',
-        borderColor: 'neutral.70',
-      },
+      ...disabledStates.primary,
     },
     secondary: {
       bgGradient: 'linear(to-b, neutral.100, neutral.93)',
@@ -29,14 +56,14 @@ const ButtonTheme = {
       color: 'purple.10',
       _hover: {
         bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+        ...disabledStates.secondary,
       },
       _active: {
         bgGradient: 'linear(to-b, neutral.90, neutral.90)',
         borderColor: 'neutral.80',
+        ...disabledStates.secondary,
       },
-      _disabled: {
-        color: 'neutral.70',
-      },
+      ...disabledStates.secondary,
     },
     tertiary: {
       background: 'transparent',
@@ -45,14 +72,14 @@ const ButtonTheme = {
       _hover: {
         background: 'neutral.93',
         borderColor: 'neutral.93',
+        ...disabledStates.tertiary,
       },
       _active: {
         background: 'neutral.90',
         borderColor: 'neutral.90',
+        ...disabledStates.tertiary,
       },
-      _disabled: {
-        color: 'neutral.70',
-      },
+      ...disabledStates.tertiary,
     },
     'primary--danger': {
       bgGradient: 'linear(to-b, red.50, red.30)',
@@ -62,15 +89,14 @@ const ButtonTheme = {
       _hover: {
         bgGradient: 'linear(to-b, red.40, red.20)',
         borderColor: 'red.40',
+        ...disabledStates.primary,
       },
       _active: {
         bgGradient: 'linear(to-b, red.20, red.20)',
         borderColor: 'red.20',
+        ...disabledStates.primary,
       },
-      _disabled: {
-        bgGradient: 'linear(to-b, neutral.80, neutral.70)',
-        borderColor: 'neutral.70',
-      },
+      ...disabledStates.primary,
     },
     'secondary--danger': {
       bgGradient: 'linear(to-b, neutral.100, neutral.93)',
@@ -79,14 +105,14 @@ const ButtonTheme = {
       _hover: {
         bgGradient: 'linear(to-b, red.93, red.93)',
         borderColor: 'red.70',
+        ...disabledStates.secondary,
       },
       _active: {
         bgGradient: 'linear(to-b, red.90, red.90)',
         borderColor: 'red.70',
+        ...disabledStates.secondary,
       },
-      _disabled: {
-        color: 'neutral.70',
-      },
+      ...disabledStates.secondary,
     },
     'tertiary--danger': {
       background: 'transparent',
@@ -95,14 +121,14 @@ const ButtonTheme = {
       _hover: {
         background: 'red.93',
         borderColor: 'red.93',
+        ...disabledStates.tertiary,
       },
       _active: {
         background: 'red.90',
         borderColor: 'red.90',
+        ...disabledStates.tertiary,
       },
-      _disabled: {
-        color: 'neutral.70',
-      },
+      ...disabledStates.tertiary,
     },
   },
   sizes: {

package/src/Components/Button/Button.tsx

@@ -16,13 +16,17 @@ export interface ButtonProps extends ChakraButtonProps {
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
 const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
-  const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
+  const { as, isDanger, isDisabled, leftIconName, rightIconName, size, variant, ...rest } = props;
   const properties: ChakraButtonProps = {
     as,
+    isDisabled,
     size,
     variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
+  if (isDisabled) {
+    properties.as = 'button';
+  }
   if (leftIconName) {
     properties.leftIcon = <Icon name={leftIconName} />;
   }

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

@@ -0,0 +1,59 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import Dropdown from './Dropdown';
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
+} 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,73 @@
+import { ChakraStylesConfig } from 'chakra-react-select';
+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'): ChakraStylesConfig => ({
+  container: (_provided, state) => ({
+    borderRadius: '4',
+    boxShadow: state.isFocused ? 'outline' : 'none',
+    position: 'relative',
+  }),
+  control: () => ({
+    display: 'flex',
+    ...SelectTheme.baseStyle.field,
+    ...SelectTheme.sizes[size].field,
+  }),
+  dropdownIndicator: () => ({
+    position: 'absolute',
+    right: '7px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+  }),
+  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',
+    },
+  }),
+  menu: () => ({
+    position: 'absolute',
+    transform: 'translateY(8px)',
+    width: '100%',
+  }),
+  menuList: (provided) => ({
+    ...provided,
+    borderRadius: '4',
+  }),
+  option: (provided) => ({
+    ...provided,
+    padding: '12',
+  }),
+  placeholder: () => ({
+    color: 'text.secondary',
+    ...controlTextStyle,
+  }),
+  singleValue: () => controlTextStyle,
+  valueContainer: () => ({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+});
+
+export default getDropdownStyles;

package/src/Components/Dropdown/Dropdown.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { chakraComponents, ChakraStylesConfig, DropdownIndicatorProps, OptionProps, Select } from 'chakra-react-select';
+import Icon from '@/Old/Icon/Icon';
+import getDropdownStyles from './Dropdown.styles';
+
+export interface DropdownProps {
+  defaultValue?: OptionProps;
+  options: OptionProps[];
+  placeholder?: string;
+  onChange?: () => void;
+  size?: 'small' | 'medium';
+}
+
+const components = {
+  DropdownIndicator: (props: DropdownIndicatorProps) => {
+    return (
+      <chakraComponents.DropdownIndicator {...props}>
+        <Icon name="DropdownArrows" />
+      </chakraComponents.DropdownIndicator>
+    );
+  },
+};
+
+const Dropdown = (props: DropdownProps) => {
+  const { defaultValue, onChange, options, placeholder, size = 'medium' } = props;
+  const chakraStyles: ChakraStylesConfig = getDropdownStyles(size);
+
+  return (
+    <Select
+      chakraStyles={chakraStyles}
+      components={components}
+      defaultValue={defaultValue}
+      isSearchable={false}
+      onChange={onChange}
+      options={options}
+      placeholder={placeholder}
+      selectedOptionStyle="check"
+    />
+  );
+};
+
+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/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,9 +61,6 @@ 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';
 
@@ -165,9 +162,6 @@ export { default as Portal } from './Old/Portal/Portal';
 export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
 export { default as ProgressBar } from './Old/Progress/ProgressBar';
 
-export type { Props as ProgressButtonProps } from './Old/Progress/ProgressButton';
-export { default as ProgressButton } from './Old/Progress/ProgressButton';
-
 export type { Props as ProgressBitbotProps } from './Old/Progress/ProgressBitbot';
 export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
 

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,
   },
 };