@bitrise/bitkit 10.27.0 → 10.29.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.27.0",
+  "version": "10.29.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@chakra-ui/react": "^2.2.4",
     "@chakra-ui/react-utils": "^2.0.1",
+    "@chakra-ui/styled-system": "^2.3.1",
     "@chakra-ui/utils": "^2.0.4",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,15 +1,8 @@
 import React, { cloneElement, forwardRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  chakra,
-  ChakraProps,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  useControllableState,
-  useMultiStyleConfig,
-} from '@chakra-ui/react';
+import { chakra, ChakraProps, useControllableState, useMultiStyleConfig } from '@chakra-ui/react';
 import { FloatingFocusManager, UseFloatingProps } from '@floating-ui/react-dom-interactions';
-import Icon, { TypeIconName } from '../Icon/Icon';
+import { TypeIconName } from '../Icon/Icon';
+import Input from '../Form/Input/Input';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -55,21 +48,17 @@ const DropdownSearch = ({
     [searchOnSubmit],
   );
   return (
-    <InputGroup sx={search}>
-      <InputLeftElement pointerEvents="none">
-        <Icon aria-hidden color="neutral.60" size="24" name="Magnifier" />
-      </InputLeftElement>
-      <Input
-        onKeyDown={onKeyDown}
-        ref={searchRef}
-        role="search"
-        aria-label={placeholder}
-        width="100%"
-        placeholder={placeholder}
-        value={value}
-        onChange={onChangeCB}
-      />
-    </InputGroup>
+    <Input
+      onKeyDown={onKeyDown}
+      inputRef={searchRef}
+      role="search"
+      aria-label={placeholder}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChangeCB}
+      leftIconName="Magnifier"
+      sx={search}
+    />
   );
 };
 export { DropdownOption, DropdownGroup, DropdownSearch, NoResultsFound, DropdownDetailedOption };

package/src/Components/Form/Input/Input.stories.tsx

@@ -0,0 +1,52 @@
+import { ComponentMeta } from '@storybook/react';
+import IconButton from '@/Components/IconButton/IconButton';
+import Input from './Input';
+
+export default {
+  component: Input,
+  argTypes: {
+    type: {
+      control: 'inline-radio',
+      options: ['number', 'password', 'text'],
+    },
+  },
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isLoading: false,
+    isReadOnly: false,
+    label: 'Input',
+    placeholder: 'Placeholder text',
+    type: 'text',
+    width: '400px',
+  },
+} as ComponentMeta<typeof Input>;
+
+export const WithProps = {
+  args: {
+    errorText: '',
+    helperText:
+      'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
+    label: 'Input',
+  },
+};
+
+export const WithElement = {
+  args: {
+    isDisabled: true,
+    label: 'With additional element (Like IconButton)',
+    rightElement: (
+      <IconButton aria-label="Copy to clipboard" borderLeftRadius="0" iconName="Duplicate" variant="secondary">
+        eee
+      </IconButton>
+    ),
+    value: '1234567890ABCDE',
+  },
+};
+
+export const WithIcon = {
+  args: {
+    label: 'With Icon on the left and/or right side',
+    leftIconName: 'Magnifier',
+  },
+};

package/src/Components/Form/Input/Input.theme.ts

@@ -0,0 +1,38 @@
+import { defineStyle } from '@chakra-ui/styled-system';
+
+const InputTheme = defineStyle({
+  baseStyle: {
+    field: {
+      width: '100%',
+      padding: '0.6875rem',
+      background: 'neutral.100',
+      border: '1px solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      boxShadow: 'inner',
+      outline: 0,
+      appearance: 'none',
+      transition: '200ms',
+      _placeholder: {
+        fontStyle: 'italic',
+      },
+      _disabled: {
+        background: 'neutral.93',
+        cursor: 'not-allowed',
+      },
+      _focusVisible: {
+        boxShadow: 'formFocus',
+        borderColor: 'purple.50',
+      },
+      _invalid: {
+        color: 'red.50',
+        borderColor: 'red.50',
+      },
+    },
+    leftElement: {
+      background: 'red',
+    },
+  },
+});
+
+export default InputTheme;

package/src/Components/Form/Input/Input.tsx

@@ -0,0 +1,123 @@
+import { ReactNode, Ref } from 'react';
+import {
+  FormControl,
+  FormControlProps,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Input as ChakraInput,
+  InputProps as ChakraInputProps,
+  forwardRef,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+} from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../../Icon/Icon';
+
+export interface InputProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
+  'data-testid'?: string;
+  errorText?: string;
+  isLoading?: boolean;
+  helperText?: string;
+  inputRef?: Ref<HTMLInputElement>;
+  label?: ReactNode;
+  leftIconName?: TypeIconName;
+  name?: string;
+  onBlur?: ChakraInputProps['onBlur'];
+  onChange?: ChakraInputProps['onChange'];
+  rightElement?: ReactNode;
+  rightIconName?: TypeIconName;
+  role?: ChakraInputProps['role'];
+  type?: ChakraInputProps['type'];
+  value?: ChakraInputProps['value'];
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
+  autoComplete?: ChakraInputProps['autoComplete'];
+  max?: ChakraInputProps['max'];
+  maxLength?: ChakraInputProps['maxLength'];
+  min?: ChakraInputProps['min'];
+  minLength?: ChakraInputProps['minLength'];
+  pattern?: ChakraInputProps['pattern'];
+  step?: ChakraInputProps['step'];
+}
+
+/**
+ * Input component is a component that is used to get user input in a text field.
+ */
+const Input = forwardRef<InputProps, 'div'>((props, ref) => {
+  const {
+    'data-testid': dataTestid,
+    autoComplete,
+    errorText,
+    helperText,
+    isDisabled,
+    inputRef,
+    isInvalid,
+    isLoading,
+    label,
+    leftIconName,
+    max,
+    maxLength,
+    min,
+    minLength,
+    pattern,
+    placeholder,
+    step,
+    onBlur,
+    onChange,
+    rightElement,
+    rightIconName,
+    name,
+    role,
+    type,
+    value,
+    ...rest
+  } = props;
+
+  const formControlProps = {
+    isDisabled: isDisabled || isLoading,
+    isInvalid: isInvalid || !!errorText,
+    ...rest,
+    ref,
+  };
+  const InputProps = {
+    autoComplete,
+    'data-testid': dataTestid,
+    onBlur,
+    onChange,
+    name,
+    max,
+    maxLength,
+    min,
+    minLength,
+    pattern,
+    placeholder,
+    ref: inputRef,
+    role,
+    step,
+    type,
+    value,
+  };
+  return (
+    <FormControl {...formControlProps}>
+      {label && <FormLabel>{label}</FormLabel>}
+      <InputGroup>
+        {leftIconName && (
+          <InputLeftElement margin="12px" pointerEvents="none">
+            <Icon name={leftIconName} />
+          </InputLeftElement>
+        )}
+        <ChakraInput paddingLeft={leftIconName ? '43px' : '11px'} {...InputProps} />
+        {rightElement && <InputRightElement>{rightElement}</InputRightElement>}
+        {!rightElement && rightIconName && (
+          <InputRightElement>
+            <Icon name={rightIconName} margin="12px" pointerEvents="none" />
+          </InputRightElement>
+        )}
+      </InputGroup>
+      {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
+      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
+    </FormControl>
+  );
+});
+
+export default Input;

package/src/Components/Form/Textarea/Textarea.theme.ts

@@ -1,36 +1,11 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { defineStyle } from '@chakra-ui/styled-system';
+import InputTheme from '../Input/Input.theme';
 
-const TextareaTheme: ComponentStyleConfig = {
+const TextareaTheme = defineStyle({
   baseStyle: {
-    width: '100%',
+    ...InputTheme.baseStyle?.field,
     minHeight: '96',
-    padding: '16',
-    background: 'neutral.100',
-    border: '1px solid',
-    borderColor: 'neutral.90',
-    borderRadius: '4',
-    boxShadow: 'inner',
-    outline: 0,
-    appearance: 'none',
-    lineHeight: 'short',
-    verticalAlign: 'top',
-    transition: '200ms',
-    _placeholder: {
-      fontStyle: 'italic',
-    },
-    _disabled: {
-      background: 'neutral.93',
-      cursor: 'not-allowed',
-    },
-    _focusVisible: {
-      boxShadow: 'formFocus',
-      borderColor: 'purple.50',
-    },
-    _invalid: {
-      color: 'red.50',
-      borderColor: 'red.50',
-    },
   },
-};
+});
 
 export default TextareaTheme;

package/src/Components/Table/Table.stories.tsx

@@ -188,7 +188,7 @@ ExpandableRows.args = {
       <Thead>
         <Tr>
           <Th />
-          <Th colSpan={2}>ID</Th>
+          <Th>ID</Th>
           <Th>Status</Th>
           <Th>Time</Th>
         </Tr>

package/src/Components/Table/Tr.tsx

@@ -60,7 +60,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
           <Td sx={css.expandTd}>
             <IconButton
               iconName="ChevronDown"
-              aria-label="Toggle current row"
+              aria-label={isOpen ? 'Collapse row' : 'Expand row'}
               onClick={onToggleClick}
               size="small"
               variant="tertiary"
@@ -76,7 +76,9 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
         </ChakraTr>
         <ChakraTr>
           <Td colSpan={colSpan} paddingY="0" transform={isOpen ? 'none' : 'translateY(-1px)'}>
-            <Collapse in={isOpen}>{expandableContent}</Collapse>
+            <Collapse in={isOpen} unmountOnExit>
+              {expandableContent}
+            </Collapse>
           </Td>
         </ChakraTr>
       </>

package/src/index.ts

@@ -201,3 +201,6 @@ export { default as Collapse } from './Components/Collapse/Collapse';
 
 export type { TextareaProps } from './Components/Form/Textarea/Textarea';
 export { default as Textarea } from './Components/Form/Textarea/Textarea';
+
+export type { InputProps } from './Components/Form/Input/Input';
+export { default as Input } from './Components/Form/Input/Input';

package/src/old.ts

@@ -18,9 +18,6 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
 
-export type { Props as InputProps } from './Old/Input/Input';
-export { default as Input } from './Old/Input/Input';
-
 export type { Props as InputContainerProps } from './Old/Input/InputContainer';
 export { default as InputContainer } from './Old/Input/InputContainer';
 

package/src/theme.ts

@@ -14,7 +14,7 @@ import List from './Components/List/List.theme';
 import Menu from './Components/Menu/Menu.theme';
 import Radio from './Components/Form/Radio/Radio.theme';
 import Select from './Components/Select/Select.theme';
-import Input from './Components/Input/Input.theme';
+import Input from './Components/Form/Input/Input.theme';
 import Dropdown from './Components/Dropdown/Dropdown.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';