@bitrise/bitkit 12.92.0 → 12.93.1-alpha.0

package/package.json

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

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

@@ -0,0 +1,19 @@
+import { defineStyleConfig } from '@chakra-ui/styled-system';
+
+const ChipInput = defineStyleConfig({
+  baseStyle: {
+    ':has(:focus-visible)': { boxShadow: 'outline' },
+    appearance: 'none',
+    background: 'neutral.100',
+    border: '1px solid',
+    borderColor: 'neutral.90',
+    borderRadius: '4',
+    boxShadow: 'inner',
+    outline: 0,
+    padding: '0.6875rem',
+    transition: '200ms',
+    width: '100%',
+  },
+});
+
+export default ChipInput;

package/src/Components/Form/ChipInput/ChipInput.tsx

@@ -0,0 +1,142 @@
+import { ClipboardEventHandler, KeyboardEventHandler, ReactNode, useId } from 'react';
+import {
+  chakra,
+  FormControl,
+  FormControlProps,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  useStyleConfig,
+} from '@chakra-ui/react';
+import Icon from '../../Icon/Icon';
+import Box from '../../Box/Box';
+import Tag from '../../Tag/Tag';
+import Text from '../../Text/Text';
+
+type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
+export interface ChipInputProps extends UsedFormControlProps {
+  label?: string;
+  placeholder?: string;
+  value: string[];
+  onChange: (nv: string[]) => void;
+  separator?: RegExp;
+  maxCount?: number;
+  invalidValues?: string[];
+  errorText?: ReactNode;
+  helperText?: ReactNode;
+}
+
+const ChipInput = ({
+  errorText,
+  helperText,
+  invalidValues = [],
+  label,
+  maxCount,
+  onChange,
+  placeholder,
+  separator = /[, ]/,
+  value,
+  ...rest
+}: ChipInputProps) => {
+  const theme = useStyleConfig('ChipInput');
+  const keyupHandler: KeyboardEventHandler<HTMLInputElement> = (ev) => {
+    const target = ev.currentTarget;
+    if (ev.key.match(separator)) {
+      ev.preventDefault();
+      if (target.value) {
+        const newValue = target.value.split(separator)[0];
+        if (!value.includes(newValue)) {
+          onChange([...value, newValue]);
+        }
+        target.value = '';
+      }
+    } else if (ev.key === 'Backspace' && target.value.length === 0) {
+      onChange(value.slice(0, -1));
+    }
+  };
+  const pasteEventHandler: ClipboardEventHandler<HTMLInputElement> = (ev) => {
+    ev.preventDefault();
+    const newItems = ev.clipboardData
+      .getData('text/plain')
+      .split(separator)
+      .filter((item) => item && !item.match(/\s/) && !value.includes(item));
+    onChange([...value, ...newItems]);
+  };
+  const removeItem = (deleted: string) => {
+    onChange(value.filter((val) => val !== deleted));
+  };
+  const isInvalid = rest.isInvalid || (maxCount && value.length > maxCount) || Boolean(errorText);
+  const id = useId();
+  return (
+    <FormControl {...rest} isInvalid={isInvalid}>
+      <Box alignItems="center" display={label || maxCount ? 'flex' : 'none'} gap="4" marginBlockEnd="4">
+        {label && (
+          <FormLabel
+            htmlFor={id}
+            optionalIndicator={
+              <Text as="span" color="neutral.40" fontSize="2" fontWeight="normal" marginLeft="4px">
+                (Optional)
+              </Text>
+            }
+            requiredIndicator={false}
+          >
+            {label}
+          </FormLabel>
+        )}
+
+        {maxCount && (
+          <Text
+            as="span"
+            color="neutral.40"
+            marginInlineStart="auto"
+            size="2"
+            sx={{ fontVariantNumeric: 'tabular-nums' }}
+          >
+            {value.length}/{maxCount}
+          </Text>
+        )}
+      </Box>
+      <Box
+        __css={theme}
+        display="flex"
+        flexDirection="row"
+        flexWrap="wrap"
+        gap="4"
+        paddingRight={isInvalid ? '42px' : undefined}
+      >
+        {value.map((item, idx) => (
+          <Tag
+            key={item}
+            colorScheme={invalidValues.includes(item) || (maxCount && idx > maxCount - 1) ? 'red' : undefined}
+            onClose={() => removeItem(item)}
+            size="sm"
+          >
+            {item}
+          </Tag>
+        ))}
+        {value.length === 0 && placeholder && (
+          <Text
+            color="sys.fg.subtle"
+            pointerEvents="none"
+            position="absolute"
+            sx={{ ':has(+ :focus-visible)': { display: 'none' } }}
+          >
+            {placeholder}
+          </Text>
+        )}
+        <chakra.input
+          _focusVisible={{ boxShadow: 'none' }}
+          flexGrow="1"
+          id={id}
+          onKeyDown={keyupHandler}
+          onPaste={pasteEventHandler}
+        />
+        {isInvalid && <Icon color="icon.negative" name="ErrorCircleFilled" position="absolute" right="2rem" />}
+      </Box>
+      {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
+      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};
+
+export default ChipInput;

package/src/Components/Form/DateInput/DateInput.tsx

@@ -16,6 +16,8 @@ export type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'placeholde
 const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
   const { inputRef, onCalendarClick, onChange, value, ...rest } = props;
   const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(true);
 
   const dateFormat = 'MM/dd/yyyy';
 
@@ -48,7 +50,7 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
         },
       },
       format: (date: Date | null) => (date ? DateTime.fromJSDate(date).toFormat(dateFormat) : ''),
-      lazy: false,
+      lazy: !isFocused && isEmpty,
       mask: Date,
       parse: (str: string) => {
         try {
@@ -60,7 +62,10 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
       pattern: 'LL/dd/yyyy',
     },
     {
-      onAccept: (val) => onChange?.(val),
+      onAccept: (val, maskRef) => {
+        onChange?.(val);
+        setIsEmpty(!maskRef.unmaskedValue);
+      },
     },
   );
 
@@ -89,6 +94,9 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
         {...rest}
         ref={ref}
         inputRef={innerRef}
+        onBlur={() => setIsFocused(false)}
+        onFocus={() => setIsFocused(true)}
+        placeholder={dateFormat.toLocaleLowerCase()}
         rightAddon={
           <IconButton
             _active={{ background: 'transparent' }}

package/src/Components/Icons/16x16/ErrorCircleFilled.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const ErrorCircleFilled = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      clipRule="evenodd"
+      d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7.25 9V4H8.75V9H7.25ZM7.25 12V10.5H8.75V12H7.25Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </Icon>
+));
+
+export default ErrorCircleFilled;

package/src/Components/Icons/16x16/index.ts

@@ -224,3 +224,4 @@ export { default as Workflow } from './Workflow';
 export { default as Wow } from './Wow';
 export { default as WrappedLines } from './WrappedLines';
 export { default as Xamarin } from './Xamarin';
+export { default as ErrorCircleFilled } from './ErrorCircleFilled';

package/src/Components/Icons/24x24/ErrorCircleFilled.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const ErrorCircleFilled = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      clipRule="evenodd"
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM11 13.5V6.5H13V13.5H11ZM11 17.5V15.5H13V17.5H11Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </Icon>
+));
+
+export default ErrorCircleFilled;

package/src/Components/Icons/24x24/index.ts

@@ -224,3 +224,4 @@ export { default as Workflow } from './Workflow';
 export { default as Wow } from './Wow';
 export { default as WrappedLines } from './WrappedLines';
 export { default as Xamarin } from './Xamarin';
+export { default as ErrorCircleFilled } from './ErrorCircleFilled';

package/src/Components/Icons/utils.ts

@@ -1,15 +1,6 @@
-import { useRef } from 'react';
-
-let uniqueId = 0;
-const getUniqueId = () => {
-  uniqueId += 1;
-  return uniqueId;
-};
+import { useId } from 'react';
 
 export function useIconId() {
-  const idRef = useRef<null | number>(null);
-  if (idRef.current === null) {
-    idRef.current = getUniqueId();
-  }
-  return `iconRender${idRef.current}`;
+  const id = useId();
+  return `iconRender${id}`;
 }

package/src/Foundations/Icons/figmaIcons.ts

@@ -217,7 +217,7 @@ export const figmaIcons: {
     { figmaToken: 'check-circle', iconName: 'BuildstatusSuccessful', tags: 'success' },
     { figmaToken: 'check-circle-filled', iconName: 'BuildstatusSuccessfulSolid', tags: 'success' },
     { figmaToken: 'error-circle', iconName: 'StepstatusWarning' },
-    { figmaToken: 'error-circle-filled', iconName: '' },
+    { figmaToken: 'error-circle-filled', iconName: 'ErrorCircleFilled' },
     { figmaToken: 'info-circle', iconName: '', tags: 'tooltip' },
     { figmaToken: 'info-circle-filled', iconName: '' },
     { figmaToken: 'warning', iconName: 'Warning' },

package/src/index.ts

@@ -333,3 +333,6 @@ export * from './Components/Filter/Filter.types';
 
 export type { DateInputProps } from './Components/Form/DateInput/DateInput';
 export { default as DateInput } from './Components/Form/DateInput/DateInput';
+
+export type { ChipInputProps } from './Components/Form/ChipInput/ChipInput';
+export { default as ChipInput } from './Components/Form/ChipInput/ChipInput';

package/src/theme.ts

@@ -54,6 +54,7 @@ import zIndices from './Foundations/Zindex/Zindex';
 import Toggletip from './Components/Toggletip/Toggletip.theme';
 import FilterSwitch from './Components/Filter/FilterSwitch/FilterSwitch.theme';
 import { colors, semanticTokens } from './tokens/tokens';
+import ChipInput from './Components/Form/ChipInput/ChipInput.theme';
 
 const theme = {
   breakpoints,
@@ -78,6 +79,7 @@ const theme = {
     FilterSwitch,
     ...Form,
     Alert,
+    ChipInput,
     CloseButton,
     CodeBlock,
     CodeSnippet,