@bitrise/bitkit 10.21.0 → 10.23.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.21.0",
+  "version": "10.23.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import { Checkbox as ChakraCheckbox, CheckboxProps as ChakraCheckboxProps, forwa
 import Icon from '../../Icon/Icon';
 
 type CheckboxInputProps = ChakraCheckboxProps['inputProps'] & {
-  'data-testid': string;
+  'data-testid'?: string;
 };
 
 export interface CheckboxProps extends Omit<ChakraCheckboxProps, 'icon' | 'iconColor' | 'iconSize' | 'inputProps'> {

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

@@ -24,6 +24,7 @@ const FormTheme = {
   FormLabel: {
     baseStyle: {
       marginBottom: '4',
+      fontSize: '2',
       fontWeight: 'bold',
     } as ComponentStyleConfig,
   },

package/src/Components/Form/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 import { Radio as ChakraRadio, RadioProps as ChakraRadioProps, forwardRef } from '@chakra-ui/react';
 
 type RadioInputProps = ChakraRadioProps['inputProps'] & {
-  'data-testid': string;
+  'data-testid'?: string;
 };
 
 export interface RadioProps extends Omit<ChakraRadioProps, 'inputProps'> {

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

@@ -8,7 +8,7 @@ export default {
 export const WithProps = {
   args: {
     errorText: '',
-    helpherText:
+    helperText:
       'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
     isDisabled: false,
     isInvalid: false,

package/src/Components/Form/Textarea/Textarea.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import Textarea from './Textarea';
+
+describe('Textarea', () => {
+  it('forwards data-testid', async () => {
+    render(<Textarea data-testid="testid" />);
+    const elem = await screen.findByTestId('testid');
+    expect(elem.tagName).toBe('TEXTAREA');
+    expect(elem).toBeInTheDocument();
+  });
+  describe('react-hook-form support', () => {
+    it('sends data when submitted', async () => {
+      const handler = jest.fn();
+      const TestComponent = () => {
+        const { register, handleSubmit } = useForm();
+        return (
+          <form onSubmit={handleSubmit((data) => handler(data))}>
+            <Textarea {...register('textarea')} />
+            <button type="submit">Send</button>
+          </form>
+        );
+      };
+      render(<TestComponent />);
+      const submit = await screen.findByRole('button', { name: 'Send' });
+      const textarea = await screen.findByRole('textbox');
+      await userEvent.type(textarea, 'test');
+      await userEvent.click(submit);
+
+      expect(handler).toHaveBeenCalledWith({ textarea: 'test' });
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -14,12 +14,16 @@ const TextareaTheme: ComponentStyleConfig = {
     appearance: 'none',
     lineHeight: 'short',
     verticalAlign: 'top',
+    transition: '100ms',
+    _placeholder: {
+      fontStyle: 'italic',
+    },
     _disabled: {
       background: 'neutral.93',
       cursor: 'not-allowed',
     },
     _focusVisible: {
-      boxShadow: 'outline',
+      boxShadow: 'formFocus',
     },
     _invalid: {
       color: 'red.50',

package/src/Components/Form/Textarea/Textarea.tsx

@@ -10,13 +10,15 @@ import {
   forwardRef,
 } from '@chakra-ui/react';
 
-export interface TextareaProps extends Omit<FormControlProps, 'label' | 'onChange'> {
-  dataTestid?: string;
+export interface TextareaProps extends Omit<FormControlProps, 'label' | 'onChange' | 'onBlur'> {
+  'data-testid'?: string;
   errorText?: string;
   isLoading?: boolean;
-  helpherText?: string;
+  helperText?: string;
   label?: ReactNode;
+  name?: string;
   onChange?: ChakraTextareaProps['onChange'];
+  onBlur?: ChakraTextareaProps['onBlur'];
   value?: ChakraTextareaProps['value'];
 }
 
@@ -25,30 +27,41 @@ export interface TextareaProps extends Omit<FormControlProps, 'label' | 'onChang
  */
 const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
   const {
-    dataTestid,
+    'data-testid': dataTestid,
     errorText,
-    helpherText,
+    helperText,
     isDisabled,
     isInvalid,
     isLoading,
     label,
     placeholder,
     onChange,
+    onBlur,
+    name,
     value,
     ...rest
   } = props;
+  const formControlProps = {
+    display: label || errorText || helperText ? 'block' : 'inline-block',
+    isDisabled: isDisabled || isLoading,
+    isInvalid: isInvalid || !!errorText,
+    ...rest,
+    ref,
+  };
   const textareaProps = {
-    dataTestid,
+    'data-testid': dataTestid,
     onChange,
+    onBlur,
+    name,
     placeholder,
     value,
   };
   return (
-    <FormControl isDisabled={isDisabled || isLoading} isInvalid={isInvalid || !!errorText} {...rest} ref={ref}>
+    <FormControl {...formControlProps}>
       {label && <FormLabel>{label}</FormLabel>}
       <ChakraTextarea {...textareaProps} />
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
-      {helpherText && <FormHelperText as="p">{helpherText}</FormHelperText>}
+      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
     </FormControl>
   );
 });

package/src/Components/Select/Select.stories.tsx

@@ -6,6 +6,13 @@ import Select from './Select';
 export default {
   title: 'Components/Select',
   component: Select,
+  args: {
+    isLoading: false,
+    errorText: 'Error text',
+    helperText: 'Helpher text',
+    label: 'Label',
+    name: 'Name',
+  },
   argTypes: {
     onChange: {
       action: 'onChange event',

package/src/Components/Select/Select.tsx

@@ -1,41 +1,87 @@
-import { forwardRef, Select as ChakraSelect, SelectProps as ChakraSelectProps, Spinner } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import {
+  FormControl,
+  FormControlProps,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  forwardRef,
+  Select as ChakraSelect,
+  SelectProps as ChakraSelectProps,
+  Spinner,
+} from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 
-export interface SelectProps extends ChakraSelectProps {
-  size?: 'small' | 'medium';
+export interface SelectProps extends Omit<FormControlProps, 'label' | 'onChange'> {
+  'data-testid'?: string;
+  errorText?: string;
+  helperText?: string;
   isLoading?: boolean;
+  label?: ReactNode;
+  name?: string;
+  onChange?: ChakraSelectProps['onChange'];
+  size?: 'small' | 'medium';
+  value?: ChakraSelectProps['value'];
 }
 
-const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
-  const { size, placeholder, children, isDisabled, isLoading, ...rest } = props;
+const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
+  const {
+    children,
+    'data-testid': dataTestid,
+    errorText,
+    helperText,
+    isDisabled,
+    isInvalid,
+    isLoading,
+    label,
+    name,
+    onChange,
+    placeholder,
+    size,
+    value,
+    ...rest
+  } = props;
   const iconSize = size === 'medium' ? '24' : '16';
-  const properties: ChakraSelectProps = {
+  const formControlProps = {
+    display: label || errorText || helperText ? 'block' : 'inline-block',
+    isDisabled: isDisabled || isLoading,
+    isInvalid: isInvalid || !!errorText,
+    ...rest,
+    ref,
+  };
+  const selectProperties: ChakraSelectProps = {
     icon: isLoading ? (
       <Spinner width={iconSize} height={iconSize} marginEnd="4" />
     ) : (
       <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />
     ),
-    isDisabled: isLoading || isDisabled,
+    name,
+    onChange,
     size,
+    value,
     variant: 'select',
-    ...rest,
   };
   if (placeholder) {
-    if ('value' in properties) {
-      properties.value = properties.value || '';
+    if ('value' in selectProperties) {
+      selectProperties.value = selectProperties.value || '';
     } else {
-      properties.defaultValue = '';
+      selectProperties.defaultValue = '';
     }
   }
   return (
-    <ChakraSelect ref={ref} {...properties}>
-      {placeholder && (
-        <option hidden disabled value="">
-          {placeholder}
-        </option>
-      )}
-      {children}
-    </ChakraSelect>
+    <FormControl {...formControlProps}>
+      {label && <FormLabel>{label}</FormLabel>}
+      <ChakraSelect data-testid={dataTestid} ref={ref} {...selectProperties}>
+        {placeholder && (
+          <option hidden disabled value="">
+            {placeholder}
+          </option>
+        )}
+        {children}
+      </ChakraSelect>
+      {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
+      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
+    </FormControl>
   );
 });
 

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

@@ -132,13 +132,14 @@ ExpandableRows.args = {
       <TableCaption description="Click on a row">Expandable rows</TableCaption>
       <Thead>
         <Tr>
+          <Th />
           <Th colSpan={2}>ID</Th>
           <Th>Status</Th>
           <Th>Time</Th>
         </Tr>
       </Thead>
       <Tbody>
-        <Tr expandableContent={<Box paddingY="12">😎</Box>}>
+        <Tr expandableContent={<Box paddingY="12">😎</Box>} defaultIsExpanded>
           <Td>f6963af857c8f2fe</Td>
           <Td>Success</Td>
           <Td>May 29, 2022 10:11:32am</Td>
@@ -148,6 +149,12 @@ ExpandableRows.args = {
           <Td>Aborted</Td>
           <Td>May 29, 2022 9:12:50am</Td>
         </Tr>
+        <Tr>
+          <Td />
+          <Td>f6963af857c8f2fe</Td>
+          <Td>Failed</Td>
+          <Td>May 29, 2022 10:11:32am</Td>
+        </Tr>
       </Tbody>
     </>
   ),

package/src/Components/Table/Table.theme.ts

@@ -91,9 +91,7 @@ const Tabletheme: SystemStyleObject = {
     expandTd: {
       borderBottomColor: 'transparent',
       width: '1%',
-      '+ td': {
-        paddingLeft: 0,
-      },
+      paddingRight: 0,
     },
   },
 };

package/src/Components/Table/Tr.tsx

@@ -1,4 +1,4 @@
-import { Children, ReactNode } from 'react';
+import { Children, ReactNode, useCallback } from 'react';
 import {
   Collapse,
   Tr as ChakraTr,
@@ -10,19 +10,33 @@ import {
 import IconButton from '../IconButton/IconButton';
 import Td from './Td';
 
-export interface TableRowProps extends ChakraTableRowProps {
-  expandableContent?: ReactNode | undefined;
+type RowProps = ChakraTableRowProps & {
   /**
    * @deprecated - Please use it only when really necessary, we are working on a new table-like components with clickable items
    */
   onClick?: ChakraTableRowProps['onClick'];
-}
+};
+
+type NonExpandableProps = ChakraTableRowProps & {
+  expandableContent?: never;
+  defaultIsExpanded?: never;
+  onExpandedChanged?: never;
+};
+
+type ExpandableProps = ChakraTableRowProps & {
+  expandableContent: ReactNode | undefined;
+  defaultIsExpanded?: boolean;
+  onExpandedChanged?(isExpanded: boolean): void;
+};
+
+export type TableRowProps = RowProps & (NonExpandableProps | ExpandableProps);
 
 const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
-  const { isOpen, onToggle } = useDisclosure();
+  const { children, defaultIsExpanded, onExpandedChanged, expandableContent, onClick, ...rest } = props;
+
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: defaultIsExpanded });
   const css = useTableStyles();
 
-  const { children, expandableContent, onClick, ...rest } = props;
   const properties: ChakraTableRowProps = {
     onClick,
     ...rest,
@@ -32,7 +46,12 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
     properties.sx = css.clickableTr;
   }
 
-  //
+  const onToggleClick = useCallback(() => {
+    const nextOpen = !isOpen;
+    onToggle();
+    onExpandedChanged?.(nextOpen);
+  }, [isOpen, onToggle, onExpandedChanged]);
+
   if (expandableContent) {
     const colSpan = Children.count(children) + 1;
     return (
@@ -42,7 +61,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
             <IconButton
               iconName="ChevronDown"
               aria-label="Toggle current row"
-              onClick={onToggle}
+              onClick={onToggleClick}
               size="small"
               variant="tertiary"
               sx={{

package/src/Components/Toggle/Toggle.stories.tsx

@@ -9,7 +9,8 @@ export default {
 export const WithProps = {
   args: {
     defaultChecked: false,
-    helpherText:
+    errorText: '',
+    helperText:
       'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
     isDisabled: false,
     isLoading: false,

package/src/Components/Toggle/Toggle.theme.ts

@@ -2,7 +2,7 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
 const ToggleTheme: ComponentStyleConfig = {
   baseStyle: {
-    formControl: {
+    labelWrapper: {
       display: 'flex',
       gap: '8',
     },
@@ -61,7 +61,9 @@ const ToggleTheme: ComponentStyleConfig = {
       },
     },
     label: {
+      fontSize: '3',
       fontWeight: 'normal',
+      lineHeight: '3',
       marginBottom: 0,
     },
     spinner: {

package/src/Components/Toggle/Toggle.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import {
   FormControl,
   FormControlProps,
+  FormErrorMessage,
   FormHelperText,
   FormLabel,
   Spinner,
@@ -13,14 +14,16 @@ import {
 import Box from '../Box/Box';
 
 export interface ToggleProps extends Omit<FormControlProps, 'label'> {
-  dataTestid?: string;
+  'data-testid'?: string;
   defaultChecked?: SwitchProps['defaultChecked'];
+  errorText?: string;
   id?: SwitchProps['id'];
   isChecked?: SwitchProps['isChecked'];
   isDisabled?: SwitchProps['isDisabled'];
   isLoading?: boolean;
-  helpherText?: string;
+  helperText?: string;
   label?: ReactNode;
+  name?: string;
   onChange?: SwitchProps['onChange'];
   value?: SwitchProps['value'];
 }
@@ -30,31 +33,42 @@ export interface ToggleProps extends Omit<FormControlProps, 'label'> {
  */
 const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
   const {
-    dataTestid,
+    'data-testid': dataTestid,
     defaultChecked,
-    helpherText,
+    errorText,
+    helperText,
     id,
     isChecked,
+    isInvalid,
     isDisabled,
     isLoading,
     label,
+    name,
     onChange,
     value,
     ...rest
   } = props;
+  const formControlProps = {
+    display: label || errorText || helperText ? 'block' : 'inline-block',
+    isDisabled: isDisabled || isLoading,
+    isInvalid: isInvalid || !!errorText,
+    ...rest,
+    ref,
+  };
   const switchProps = {
-    dataTestid,
+    'data-testid': dataTestid,
     defaultChecked,
     id,
     isChecked,
     isDisabled: isDisabled || isLoading,
+    name,
     onChange,
     value,
   };
   const css = useMultiStyleConfig('Switch');
   return (
-    <FormControl {...rest} ref={ref}>
-      <Box sx={css.formControl}>
+    <FormControl {...formControlProps}>
+      <Box sx={css.labelWrapper}>
         <Switch {...switchProps} />
         {label && (
           <FormLabel htmlFor={id} sx={css.label}>
@@ -63,7 +77,8 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
         )}
         {isLoading && <Spinner sx={css.spinner} />}
       </Box>
-      {helpherText && <FormHelperText as="p">{helpherText}</FormHelperText>}
+      {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
+      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
     </FormControl>
   );
 });

package/src/Foundations/Shadows/Shadows.ts

@@ -5,6 +5,7 @@ const shadows = {
   inner: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset',
   outline: '0 0 0 3px #C289E6',
   tooltip: '0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)',
+  formFocus: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 3px rgba(146, 71, 194, 0.3)',
   none: 'none',
 };