@bitrise/bitkit 13.210.1-alpha.1 → 13.212.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.210.1-alpha.1",
+  "version": "13.212.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Form/FormLabel.tsx

@@ -24,6 +24,8 @@ const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
     return null;
   }
 
+  const counterColor = maxLength && valueLength && valueLength > maxLength ? 'input/text/error' : 'text/secondary';
+
   return (
     <Box alignItems="center" display="flex" gap="4" marginBlockEnd="4">
       <ChakraFormLabel
@@ -48,7 +50,7 @@ const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
       {!badge && withCounter && maxLength && (
         <Text
           as="span"
-          color="text/secondary"
+          color={counterColor}
           marginInlineStart="auto"
           size="2"
           sx={{ fontVariantNumeric: 'tabular-nums' }}

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

@@ -41,6 +41,7 @@ type UsedChakraInputProps = Pick<
   | 'placeholder'
   | 'step'
 >;
+
 export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   badge?: FormLabelProps['badge'];
   errorText?: ReactNode;
@@ -57,12 +58,12 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   leftAddonPlacement?: 'inside' | 'outside';
   leftIconColor?: IconProps['color'];
   leftIconName?: TypeIconName;
+  recommendedLength?: number;
   rightAddon?: ReactNode;
   rightAddonPlacement?: 'inside' | 'outside';
   rightIconName?: TypeIconName;
   rightIconColor?: IconProps['color'];
   size?: 'lg' | 'md';
-  withCounter?: boolean;
   warningText?: ReactNode;
 }
 
@@ -75,7 +76,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     autoFocus,
     badge,
     defaultValue,
-    errorText,
+    errorText: errorTextProp,
     helperText,
     infoTooltipLabel,
     infoTooltipProps,
@@ -100,6 +101,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     onChange,
     pattern,
     placeholder,
+    recommendedLength,
     rightAddon,
     rightAddonPlacement,
     rightIconName,
@@ -110,10 +112,15 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     type,
     value,
     warningText,
-    withCounter,
     ...rest
   } = props;
 
+  const [valueLength, setValueLength] = useState(value?.toString().length || 0);
+
+  const exceedsCharacterLimitError =
+    recommendedLength && valueLength > recommendedLength ? 'Text exceeds the character limit.' : undefined;
+  const errorText = errorTextProp || exceedsCharacterLimitError;
+
   const formControlProps = {
     isDisabled: isDisabled || isLoading,
     isInvalid: isInvalid || !!errorText,
@@ -151,8 +158,6 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const LeftContentWrapper = leftAddonPlacement === 'inside' ? InputLeftElement : InputLeftAddon;
   const inputLeftPadding = leftIconName || (leftAddon && leftAddonPlacement === 'inside') ? '43px' : inputInlinePadding;
 
-  const [valueLength, setValueLength] = useState(value?.toString().length || 0);
-
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValueLength(e.currentTarget.value.length);
 
@@ -170,9 +175,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         badge={badge}
         infoTooltipLabel={infoTooltipLabel}
         infoTooltipProps={infoTooltipProps}
-        maxLength={maxLength}
+        maxLength={maxLength || recommendedLength}
         valueLength={valueLength}
-        withCounter={withCounter}
+        withCounter={Boolean(maxLength || recommendedLength)}
       >
         {label}
       </FormLabel>

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

@@ -27,7 +27,7 @@ type UsedChakraTextProps = Pick<
   | 'placeholder'
 >;
 
-export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps {
+export type TextareaProps = {
   badge?: FormLabelProps['badge'];
   errorText?: string;
   infoTooltipLabel?: string;
@@ -35,12 +35,24 @@ export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps
   isLoading?: boolean;
   helperText?: string;
   label?: FormLabelProps['children'];
+  maxLength?: number;
+  recommendedLength?: number;
   name?: string;
   onBlur?: ChakraTextareaProps['onBlur'];
   onChange?: ChakraTextareaProps['onChange'];
   value?: ChakraTextareaProps['value'];
-  withCounter?: boolean;
-}
+} & UsedFormControlProps &
+  UsedChakraTextProps &
+  (
+    | {
+        recommendedLength?: number;
+        maxLength?: never;
+      }
+    | {
+        recommendedLength?: never;
+        maxLength?: number;
+      }
+  );
 
 /**
  * The Textarea component allows you to easily create multi-line text inputs.
@@ -50,7 +62,7 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     autoComplete,
     autoFocus,
     badge,
-    errorText,
+    errorText: errorTextProp,
     helperText,
     infoTooltipLabel,
     infoTooltipProps,
@@ -64,12 +76,20 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     onBlur,
     onChange,
     placeholder,
+    recommendedLength,
     resize,
     role,
     value,
-    withCounter,
     ...rest
   } = props;
+
+  const [valueLength, setValueLength] = useState(value?.toString().length || 0);
+
+  const exceedsCharacterLimitError =
+    recommendedLength && valueLength > recommendedLength ? 'Text exceeds the character limit.' : undefined;
+
+  const errorText = errorTextProp || exceedsCharacterLimitError;
+
   const formControlProps = {
     isDisabled: isDisabled || isLoading,
     isInvalid: isInvalid || !!errorText,
@@ -89,8 +109,6 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     value,
   };
 
-  const [valueLength, setValueLength] = useState(value?.toString().length || 0);
-
   const onTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setValueLength(e.currentTarget.value.length);
 
@@ -107,16 +125,16 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
         badge={badge}
         infoTooltipLabel={infoTooltipLabel}
         infoTooltipProps={infoTooltipProps}
-        maxLength={maxLength}
+        maxLength={maxLength || recommendedLength}
         valueLength={valueLength}
-        withCounter={withCounter}
+        withCounter={Boolean(maxLength || recommendedLength)}
       >
         {label}
       </FormLabel>
 
       <ChakraTextarea {...textareaProps} {...dataAttributes} onChange={onTextareaChange} />
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
-      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
+      {!errorText && helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
     </FormControl>
   );
 });

package/src/Components/Tabs/useTabs.ts

@@ -2,16 +2,23 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type UseTabsProps<T> = {
   defaultId?: T;
-  onChange?: (id: T, index: number) => void;
-  tabIds: T[];
   queryKey?: string;
+  tabIds: T[];
   withHistory?: boolean;
 };
 
 const useTabs = <T extends string>(props: UseTabsProps<T>) => {
-  const { defaultId, onChange, tabIds } = props;
+  const { defaultId, queryKey = 'tab', tabIds, withHistory } = props;
+
+  let searchParams = new URLSearchParams(window.location.search);
 
   const defaultIndex = useMemo(() => {
+    if (withHistory && searchParams.get(queryKey)) {
+      const tabIndex = tabIds.indexOf(searchParams.get(queryKey) as T);
+      if (tabIndex !== -1) {
+        return tabIndex;
+      }
+    }
     if (defaultId) {
       const tabIndex = tabIds.indexOf(defaultId);
       if (tabIndex !== -1) {
@@ -28,9 +35,11 @@ const useTabs = <T extends string>(props: UseTabsProps<T>) => {
   }, []);
 
   useEffect(() => {
-    if (onChange) {
-      const id = tabIds[tabIndex];
-      onChange(id, tabIndex);
+    const queryValue = tabIds[tabIndex];
+    if (withHistory && queryValue) {
+      searchParams = new URLSearchParams(window.location.search);
+      searchParams.set(queryKey, queryValue);
+      window.parent.history.replaceState(null, '', `?${decodeURIComponent(searchParams.toString())}`);
     }
   }, [tabIndex]);