@bitrise/bitkit 10.28.0 → 10.29.0-alpha-input.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.28.0",
+  "version": "10.29.0-alpha-input.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/FormLabel/FormLabel.tsx

@@ -0,0 +1,9 @@
+import { FormLabel as ChakraFormLabel, FormLabelProps, forwardRef } from '@chakra-ui/react';
+
+const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
+  return <ChakraFormLabel {...props} ref={ref} />;
+});
+
+export type { FormLabelProps };
+
+export default FormLabel;

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,133 @@
+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';
+
+type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
+type UsedChakraInputProps = Pick<
+  ChakraInputProps,
+  | 'onBlur'
+  | 'onChange'
+  | 'role'
+  | 'name'
+  | 'type'
+  | 'value'
+  | 'autoComplete'
+  | 'autoFocus'
+  | 'max'
+  | 'maxLength'
+  | 'min'
+  | 'minLength'
+  | 'pattern'
+  | 'step'
+>;
+export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
+  'data-testid'?: string;
+  errorText?: ReactNode;
+  isLoading?: boolean;
+  helperText?: ReactNode;
+  inputRef?: Ref<HTMLInputElement>;
+  label?: ReactNode;
+  leftIconName?: TypeIconName;
+  rightElement?: ReactNode;
+  rightIconName?: TypeIconName;
+}
+
+/**
+ * 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,
+    autoFocus,
+    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,
+    autoFocus,
+    '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'}
+          paddingRight={rightIconName ? '43px' : '11px'}
+          {...inputProps}
+        />
+        {rightElement && <InputRightElement>{rightElement}</InputRightElement>}
+        {!rightElement && rightIconName && (
+          <InputRightElement margin="12px" pointerEvents="none">
+            <Icon name={rightIconName} />
+          </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/index.ts

@@ -201,3 +201,9 @@ 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';
+
+export type { FormLabelProps } from './Components/Form/FormLabel/FormLabel';
+export { default as FormLabel } from './Components/Form/FormLabel/FormLabel';

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