@bitrise/bitkit 12.89.0 → 12.90.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.89.0",
+  "version": "12.90.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/Icons/16x16/Duplicate.tsx

@@ -4,10 +4,14 @@ const Duplicate = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
       clipRule="evenodd"
-      d="M12 12v.667a2 2 0 0 1-2 2H3.333a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2H4v-.667a2 2 0 0 1 2-2h6.667a2 2 0 0 1 2 2V10a2 2 0 0 1-2 2H12Zm-1.333 0H6a2 2 0 0 1-2-2V5.333h-.667A.667.667 0 0 0 2.667 6v6.667c0 .368.298.666.666.666H10a.667.667 0 0 0 .667-.666V12ZM6 2.667a.667.667 0 0 0-.667.666V10c0 .368.299.667.667.667h6.667a.667.667 0 0 0 .666-.667V3.333a.667.667 0 0 0-.666-.666H6Z"
+      d="M11 13.5C11 14.3284 10.3284 15 9.5 15H2.5C1.67157 15 1 14.3284 1 13.5V6.5C1 5.67157 1.67157 5 2.5 5H9.5C10.3284 5 11 5.67157 11 6.5V13.5ZM9.5 13.5H2.5V6.5H9.5V13.5Z"
       fill="currentColor"
       fillRule="evenodd"
     />
+    <path
+      d="M13.5 11H12V9.5H13.5V2.5H6.5V4H5V2.5C5 1.67157 5.67157 1 6.5 1H13.5C14.3284 1 15 1.67157 15 2.5V9.5C15 10.3284 14.3284 11 13.5 11Z"
+      fill="currentColor"
+    />
   </Icon>
 ));
 

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/Duplicate.tsx

@@ -4,10 +4,14 @@ const Duplicate = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
       clipRule="evenodd"
-      d="M18 18v1a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1V5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-1Zm-2 0H9a3 3 0 0 1-3-3V8H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-1ZM9 4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H9Z"
+      d="M17 20C17 21.1046 16.1046 22 15 22H4C2.89543 22 2 21.1046 2 20V9C2 7.89543 2.89543 7 4 7H15C16.1046 7 17 7.89543 17 9V20ZM15 20H4V9H15V20Z"
       fill="currentColor"
       fillRule="evenodd"
     />
+    <path
+      d="M19.8571 17H18V14.8571H19.8571V4.14286H9.14286V6H7V4.14286C7 2.95939 7.95939 2 9.14286 2H19.8571C21.0406 2 22 2.95939 22 4.14286V14.8571C22 16.0406 21.0406 17 19.8571 17Z"
+      fill="currentColor"
+    />
   </Icon>
 ));
 

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/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,