@bitrise/bitkit 9.15.0-alpha-chakra.2 → 9.16.0

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

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

@@ -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;

package/src/Old/Button/ColorButton.css

@@ -1,81 +0,0 @@
-.ColorButton {
-  border: 0 solid currentColor;
-  background-color: transparent;
-  line-height: var(--Button--line-height);
-  transition-property: border-color, background-color, color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:disabled,
-  &[disabled] {
-    opacity: 0.5;
-    cursor: default;
-  }
-}
-
-.ColorButton--size-small {
-  padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
-  border-width: var(--Button--border-small);
-  border-radius: var(--size--x1);
-  font-size: var(--fontSizes-2);
-}
-
-.ColorButton--size-medium {
-  padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
-  border-width: var(--Button--border-medium);
-  border-radius: var(--size--x1);
-  font-size: var(--fontSizes-3);
-}
-
-.ColorButton--size-large {
-  padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
-  border-width: var(--Button--border-large);
-  border-radius: 0.375rem;
-  font-size: var(--fontSizes-4);
-}
-
-.ColorButton--color-blue {
-  color: var(--color-blue--4);
-
-  &:hover { background-color: rgba(var(--rgb-blue--2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-blue--2), 0.3); }
-}
-
-.ColorButton--color-grape {
-  color: var(--color-eggplant);
-
-  &:hover { background-color: rgba(var(--rgb-grape--2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-grape--2), 0.3); }
-}
-
-.ColorButton--color-green {
-  color: var(--color-green--4);
-
-  &:hover { background-color: rgba(var(--rgb-green--2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-green--2), 0.3); }
-}
-
-.ColorButton--color-red {
-  color: var(--color-red--4);
-
-  &:hover { background-color: rgba(var(--rgb-red--2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-red--2), 0.3); }
-}
-
-.ColorButton--color-white {
-  color: var(--color-white);
-
-  &:hover { background-color: rgba(var(--rgb-white), 0.15); }
-  &:active { background-color: rgba(var(--rgb-white), 0.3); }
-}
-
-.ColorButton--color-yellow {
-  color: var(--color-yellow--5);
-
-  &:hover { background-color: rgba(var(--rgb-yellow--2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-yellow--2), 0.3); }
-}

package/src/Old/Button/ColorButton.test.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import { shallowToJson } from 'enzyme-to-json';
-import ColorButton from './ColorButton';
-
-describe('ColorButton', () => {
-  test('default template', () => {
-    expect(
-      shallowToJson(
-        shallow(
-          <ColorButton color="blue" size="small">
-            Content
-          </ColorButton>,
-        ),
-      ),
-    ).toMatchSnapshot();
-  });
-});

package/src/Old/Button/ColorButton.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './ColorButton.css';
-import ButtonSize from './ButtonSize';
-
-export interface Props extends FlexProps {
-  /** Color of the button */
-  color: 'blue' | 'grape' | 'green' | 'red' | 'white' | 'yellow';
-  /**
-   * Sets the size of the Button. Small allows the Button to fit
-   * into smaller spaces, while large will help the button stand
-   * out on a page with lots of space.
-   */
-  size?: ButtonSize;
-}
-
-/**
- *
- */
-const ColorButton: React.FunctionComponent<Props> = (props: Props) => {
-  const { color, size, ...rest } = props;
-
-  const classes = classnames('ColorButton', `ColorButton--color-${color}`, `ColorButton--size-${size}`);
-
-  return (
-    <Flex Component="button" {...rest} alignChildren="middle" className={classes} direction="horizontal" gap="x1" />
-  );
-};
-
-export default ColorButton;

package/src/Old/Button/__snapshots__/ColorButton.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorButton default template 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="ColorButton ColorButton--color-blue ColorButton--size-small"
-  direction="horizontal"
-  gap="x1"
->
-  Content
-</Flex>
-`;

package/src/Old/Progress/ProgressColorButton.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import ColorButton, { Props as ColorButtonProps } from '../Button/ColorButton';
-import ProgressButtonContent, { Props as ProgressButtonContentProps } from './ProgressButtonContent';
-
-export interface Props extends ColorButtonProps, ProgressButtonContentProps {}
-
-/**
- * A progress indicator colored action button that is useful
- * to provide inline feedback that after a user action,
- * something is happening.
- */
-const ProgressColorButton: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, progressing, ...rest } = props;
-
-  return (
-    <ColorButton {...rest}>
-      <ProgressButtonContent progressing={progressing}>{children}</ProgressButtonContent>
-    </ColorButton>
-  );
-};
-
-export default ProgressColorButton;