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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.13.2",
+  "version": "9.14.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,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/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,
   },
 };