@bitrise/bitkit 12.42.1 → 12.43.0

package/package.json

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

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

@@ -0,0 +1,75 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['container', 'label', 'input']);
+
+const getContainerType = (hasSelectedFiles?: boolean) => {
+  if (hasSelectedFiles) {
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      borderRadius: '8',
+      backgroundColor: 'neutral.100',
+      paddingX: '24',
+      paddingY: '16',
+      border: '1px solid',
+      borderColor: 'neutral.90',
+    };
+  }
+  return {
+    borderRadius: '8',
+    backgroundColor: 'neutral.95',
+    padding: '8',
+    cursor: 'pointer',
+    _hover: {
+      backgroundColor: 'purple.93',
+    },
+    _active: {
+      backgroundColor: 'purple.93',
+    },
+    _disabled: {
+      _active: {
+        backgroundColor: 'neutral.95',
+      },
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+    },
+  };
+};
+
+const FileInputTheme = defineMultiStyleConfig({
+  baseStyle: ({ hasSelectedFiles }) => ({
+    container: getContainerType(hasSelectedFiles),
+    label: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '8',
+      padding: '24',
+      border: '1px dashed',
+      borderColor: 'purple.50',
+      borderRadius: '4',
+      color: 'purple.50',
+      cursor: 'pointer',
+      _active: {
+        color: 'purple.10',
+        borderColor: 'purple.10',
+      },
+      _disabled: {
+        borderColor: 'neutral.60',
+        color: 'neutral.60',
+        cursor: 'not-allowed',
+      },
+      _invalid: {
+        borderColor: 'red.50',
+        color: 'red.50',
+      },
+    },
+    input: {
+      display: 'none',
+    },
+  }),
+});
+
+export default FileInputTheme;

package/src/Components/Form/FileInput/FileInput.tsx

@@ -0,0 +1,150 @@
+import { ChangeEvent, DragEvent, useRef, useState } from 'react';
+import {
+  FormControl,
+  FormControlProps,
+  FormErrorMessage,
+  FormHelperText,
+  forwardRef,
+  useId,
+  useMultiStyleConfig,
+} from '@chakra-ui/react';
+import Box from '../../Box/Box';
+import Button from '../../Button/Button';
+import Icon from '../../Icon/Icon';
+import Text from '../../Text/Text';
+
+export interface FileInputProps extends Omit<FormControlProps, 'onChange'> {
+  accept?: HTMLInputElement['accept'];
+  disabledLabel?: string;
+  errorText?: string;
+  helperText?: string;
+  name?: string;
+  onChange: (files: FileList | null) => void;
+}
+
+const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
+  const {
+    accept,
+    disabledLabel,
+    errorText,
+    helperText,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    label,
+    name,
+    onChange,
+    ...rest
+  } = props;
+
+  const id = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [selectedFileNames, setSelectedFileNames] = useState<string[]>([]);
+  const [internalErrorMessage, setInternalErrorMessage] = useState('');
+
+  const style = useMultiStyleConfig('FileInput', { hasSelectedFiles: selectedFileNames.length > 0 });
+
+  const handleFiles = async (files: FileList | null) => {
+    setSelectedFileNames(files ? Array.from(files).map((file) => file.name) : []);
+    onChange(files);
+  };
+
+  const onFileInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      handleFiles(event.target.files);
+    }
+  };
+
+  const onDragOver = (event: DragEvent<HTMLElement>) => {
+    event.preventDefault();
+  };
+
+  const onDrop = (event: DragEvent<HTMLElement>) => {
+    event.preventDefault();
+    if (isDisabled) {
+      return;
+    }
+    if (accept) {
+      const acceptedFormats = accept.split(', ');
+      if (!acceptedFormats.includes(event.dataTransfer.files[0].type)) {
+        setInternalErrorMessage(`Invalid format. You can upload only ${accept} file.`);
+        return;
+      }
+    }
+    if (inputRef.current) {
+      inputRef.current.files = event.dataTransfer.files;
+    }
+
+    handleFiles(event.dataTransfer.files);
+  };
+
+  const onRemoveClick = () => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+    onChange(null);
+    setSelectedFileNames([]);
+  };
+
+  const isInputInvalid = isInvalid || !!internalErrorMessage;
+
+  return (
+    <FormControl {...rest} isDisabled={isDisabled} isInvalid={isInputInvalid} ref={ref}>
+      <Box __css={style.container} data-disabled={isDisabled || undefined}>
+        {selectedFileNames.length > 0 ? (
+          <>
+            <div>
+              <Text as="h6" size="2" fontWeight="bold">
+                Selected file
+              </Text>
+              <Text as="span">{selectedFileNames[0]}</Text>
+            </div>
+            <Button leftIconName="MinusRemove" size="small" variant="secondary" onClick={onRemoveClick}>
+              Remove
+            </Button>
+          </>
+        ) : (
+          <Box
+            as="label"
+            aria-disabled={isDisabled || undefined}
+            data-invalid={isInputInvalid || undefined}
+            htmlFor={id}
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+            __css={style.label}
+          >
+            <Icon name="Upload" size="24" />
+            {isDisabled && disabledLabel ? disabledLabel : label}
+          </Box>
+        )}
+      </Box>
+      <FormErrorMessage as="p" marginBlockStart="8">
+        {errorText || internalErrorMessage}
+      </FormErrorMessage>
+      {helperText && (
+        <FormHelperText as="p" marginBlockStart={isInvalid ? '4' : '8'}>
+          {helperText}
+        </FormHelperText>
+      )}
+      <Box
+        as="input"
+        aria-hidden="true"
+        accept={accept}
+        disabled={isDisabled}
+        id={id}
+        name={name}
+        type="file"
+        onChange={onFileInputChange}
+        ref={inputRef}
+        __css={style.input}
+      />
+    </FormControl>
+  );
+});
+
+FileInput.defaultProps = {
+  label: 'Drag and drop file here or click to select',
+};
+
+export default FileInput;

package/src/index.ts

@@ -301,3 +301,6 @@ export { default as TableIconButton } from './Components/Table/TableIconButton';
 
 export type { ExpandableCardProps } from './Components/ExpandableCard/ExpandableCard';
 export { default as ExpandableCard } from './Components/ExpandableCard/ExpandableCard';
+
+export type { FileInputProps } from './Components/Form/FileInput/FileInput';
+export { default as FileInput } from './Components/Form/FileInput/FileInput';

package/src/theme.ts

@@ -40,6 +40,7 @@ import Note from './Components/Note/Note.theme';
 import CodeBlock from './Components/CodeBlock/CodeBlock.theme';
 import DefinitionTooltip from './Components/DefinitionTooltip/DefinitionTooltip.theme';
 import ExpandableCard from './Components/ExpandableCard/ExpandableCard.theme';
+import FileInput from './Components/Form/FileInput/FileInput.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -127,6 +128,7 @@ const theme = {
     CodeBlock,
     DefinitionTooltip,
     ExpandableCard,
+    FileInput,
   },
 };