@bitrise/bitkit 9.14.0-alpha-chakra.7 → 9.14.1

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

@@ -1,63 +0,0 @@
-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',
-    },
-  },
-} 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

@@ -1,82 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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/Select/Select.stories.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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;