@bitrise/bitkit 10.18.2 → 10.19.0-alpha-chakra.1

package/package.json

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

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

@@ -0,0 +1,32 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const FormTheme = {
+  Form: {
+    baseStyle: {
+      helperText: {
+        fontSize: '2',
+        lineHeight: '2',
+        marginTop: '4',
+        color: 'neutral.40',
+      },
+    } as ComponentStyleConfig,
+  },
+  FormError: {
+    baseStyle: {
+      text: {
+        fontSize: '2',
+        lineHeight: '2',
+        marginTop: '4',
+        color: 'red.50',
+      },
+    } as ComponentStyleConfig,
+  },
+  FormLabel: {
+    baseStyle: {
+      marginBottom: '4',
+      fontWeight: 'bold',
+    } as ComponentStyleConfig,
+  },
+};
+
+export default FormTheme;

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

@@ -0,0 +1,20 @@
+import { ComponentMeta } from '@storybook/react';
+import Textarea from './Textarea';
+
+export default {
+  component: Textarea,
+} as ComponentMeta<typeof Textarea>;
+
+export const WithProps = {
+  args: {
+    errorText: '',
+    helpherText:
+      'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
+    isDisabled: false,
+    isInvalid: false,
+    isLoading: false,
+    isReadOnly: false,
+    label: 'Textarea',
+    placeholder: 'Placeholder text',
+  },
+};

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

@@ -0,0 +1,31 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const TextareaTheme: ComponentStyleConfig = {
+  baseStyle: {
+    width: '100%',
+    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',
+    _disabled: {
+      background: 'neutral.93',
+      cursor: 'not-allowed',
+    },
+    _focusVisible: {
+      boxShadow: 'outline',
+    },
+    _invalid: {
+      color: 'red.50',
+      borderColor: 'red.50',
+    },
+  },
+};
+
+export default TextareaTheme;

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import {
+  FormControl,
+  FormControlProps,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Textarea as ChakraTextarea,
+  forwardRef,
+} from '@chakra-ui/react';
+
+export interface TextareaProps extends Omit<FormControlProps, 'label'> {
+  errorText?: string;
+  isLoading?: boolean;
+  helpherText?: string;
+  label?: ReactNode;
+}
+
+/**
+ * The Textarea component allows you to easily create multi-line text inputs.
+ */
+const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
+  const { errorText, helpherText, isDisabled, isInvalid, isLoading, label, placeholder, ...rest } = props;
+  return (
+    <FormControl isDisabled={isDisabled || isLoading} isInvalid={isInvalid || !!errorText} {...rest} ref={ref}>
+      {label && <FormLabel>{label}</FormLabel>}
+      <ChakraTextarea placeholder={placeholder} />
+      {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
+      {helpherText && <FormHelperText as="p">{helpherText}</FormHelperText>}
+    </FormControl>
+  );
+});
+
+export default Textarea;

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

@@ -60,6 +60,10 @@ const ToggleTheme: ComponentStyleConfig = {
         transform: 'translate(24px)',
       },
     },
+    label: {
+      fontWeight: 'normal',
+      marginBottom: 0,
+    },
     spinner: {
       width: '16',
       height: '16',
@@ -67,12 +71,6 @@ const ToggleTheme: ComponentStyleConfig = {
       flexShrink: 0,
       color: 'neutral.70',
     },
-    helpherText: {
-      fontSize: '2',
-      lineHeight: '2',
-      marginTop: '8px',
-      color: 'neutral.40',
-    },
   },
 };
 

package/src/Components/Toggle/Toggle.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import {
   FormControl,
   FormControlProps,
+  FormHelperText,
   FormLabel,
   Spinner,
   Switch,
@@ -10,7 +11,6 @@ import {
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
-import Text from '../Text/Text';
 
 export interface ToggleProps extends Omit<FormControlProps, 'label'> {
   dataTestid?: string;
@@ -56,10 +56,14 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     <FormControl {...rest} ref={ref}>
       <Box sx={css.formControl}>
         <Switch {...switchProps} />
-        <FormLabel htmlFor={id}>{label}</FormLabel>
+        {label && (
+          <FormLabel htmlFor={id} sx={css.label}>
+            {label}
+          </FormLabel>
+        )}
         {isLoading && <Spinner sx={css.spinner} />}
       </Box>
-      {helpherText && <Text sx={css.helpherText}>{helpherText}</Text>}
+      {helpherText && <FormHelperText as="p">{helpherText}</FormHelperText>}
     </FormControl>
   );
 });

package/src/index.ts

@@ -195,3 +195,6 @@ export { default as Tr } from './Components/Table/Tr';
 
 export type { ToggleProps } from './Components/Toggle/Toggle';
 export { default as Toggle } from './Components/Toggle/Toggle';
+
+export type { TextareaProps } from './Components/Form/Textarea/Textarea';
+export { default as Textarea } from './Components/Form/Textarea/Textarea';

package/src/old.ts

@@ -91,9 +91,6 @@ export { default as OldTableHeaderRow } from './Old/Table/TableHeaderRow';
 export type { Props as OldTableRowProps } from './Old/Table/TableRow';
 export { default as OldTableRow } from './Old/Table/TableRow';
 
-export type { Props as TextareaProps } from './Old/Textarea/Textarea';
-export { default as Textarea } from './Old/Textarea/Textarea';
-
 export type { Props as VisibilityProps } from './Old/Visibility/Visibility';
 export { default as Visibility } from './Old/Visibility/Visibility';
 

package/src/theme.ts

@@ -24,6 +24,8 @@ import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
 import Popover from './Components/Popover/Popover.theme';
 import Toggle from './Components/Toggle/Toggle.theme';
+import Textarea from './Components/Form/Textarea/Textarea.theme';
+import Form from './Components/Form/Form.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -80,6 +82,7 @@ const theme = {
     Divider,
     Dropdown,
     EmptyState,
+    ...Form,
     Link,
     List,
     Menu,
@@ -95,6 +98,7 @@ const theme = {
     Input,
     Popover,
     Switch: Toggle,
+    Textarea,
   },
 };