@spaced-out/ui-design-system 0.1.29 → 0.1.31

package/lib/components/FileUpload/FileUpload.js.flow

@@ -0,0 +1,301 @@
+// @flow strict
+import * as React from 'react';
+
+// $FlowFixMe[untyped-import] -- this should be fixed soon
+import {
+  type UseFileUploadReturnProps,
+  useFileUpload,
+} from '../../hooks/useFileUpload';
+import classify from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import {ClickableIcon, CloseIcon, Icon} from '../Icon';
+import {LinearLoader} from '../LinearLoader';
+import {Truncate} from '../Truncate';
+
+import css from './FileUpload.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  instruction?: string,
+  secondaryInstruction?: string,
+}>;
+
+export type FileProgress = number | 'indeterminate';
+
+export type FileObject = {
+  file: File,
+  id: string,
+  reject?: boolean,
+  rejectReason?: string,
+  progress?: FileProgress,
+  success?: boolean,
+  successMessage?: string,
+  // This is a flag that is used to show/hide re-upload button
+  showReUpload?: boolean,
+};
+
+// This is a file error object that is passed to onRejectedFilesDrop callback in useFileUpload hook
+export type FileError = {
+  code: string,
+};
+
+// This is a file rejection object that is passed to handleDropRejected function in useFileUpload hook
+export type FileRejection = {
+  errors: Array<FileError>,
+  file: File,
+  ...
+};
+
+// This is a ref object that is passed to FileUpload component for managing state of a single file
+export type FileUploadRef = {
+  moveFileToProgress: (id: string, progress: FileProgress) => mixed,
+  moveFileToSuccess: (id: string, successMessage?: string) => mixed,
+  moveFileToReject: (id: string, rejectReason?: string) => mixed,
+  setShowReUpload: (id: string, showReUpload?: boolean) => mixed,
+  validFiles: Array<FileObject>,
+  rejectedFiles: Array<FileObject>,
+  files: Array<FileObject>,
+};
+
+// These props are shared between FileUpload component and useFileUpload hook
+export type FileUploadBaseProps = {
+  maxFiles?: number,
+  maxSize?: number,
+  accept?: {[string]: string[]},
+  disabled?: boolean,
+
+  // File drop callbacks
+  onValidFilesDrop?: (acceptedFiles: Array<FileObject>) => void,
+  onRejectedFilesDrop?: (fileRejections: Array<FileObject>) => void,
+
+  // File clear callbacks
+  onFileClear?: (id: string) => void,
+  onClear?: () => void,
+};
+
+export type FileUploadProps = {
+  ...FileUploadBaseProps,
+
+  classNames?: ClassNames,
+  label?: React.Node,
+  instruction?: React.Node,
+  draggingInstruction?: React.Node,
+  secondaryInstruction?: React.Node,
+  required?: boolean,
+
+  // File refresh callback
+  onFileRefreshClick?: (file: FileObject) => void,
+};
+
+export type FileBlockProps = {
+  file: FileObject,
+  onFileRefreshClick?: (file: FileObject) => void,
+  handleFileClear?: (id: string) => mixed,
+};
+
+const FileUploadBase = (props: FileUploadProps, ref) => {
+  const {
+    classNames,
+    label = 'Upload File',
+    disabled = false,
+    instruction = 'Drag and drop or click to upload',
+    draggingInstruction = 'Drop here to start uploading..',
+    error = false,
+    required = false,
+    secondaryInstruction = '',
+    maxSize,
+    accept,
+    onValidFilesDrop,
+    onRejectedFilesDrop,
+    onFileClear,
+    onFileRefreshClick,
+    maxFiles = 1,
+  } = props;
+
+  // Get file upload state from useFileUpload hook
+  const {
+    validFiles,
+    rejectedFiles,
+    isDragActive,
+    getRootProps,
+    shouldAcceptFiles,
+    getInputProps,
+    handleFileClear,
+    moveFileToProgress,
+    moveFileToSuccess,
+    moveFileToReject,
+    setShowReUpload,
+  }: UseFileUploadReturnProps = useFileUpload({
+    maxFiles,
+    maxSize,
+    accept,
+    disabled,
+    onValidFilesDrop,
+    onRejectedFilesDrop,
+    onFileClear,
+  });
+
+  // Expose file upload actions to parent component
+  React.useImperativeHandle(ref, () => ({
+    moveFileToProgress,
+    moveFileToSuccess,
+    moveFileToReject,
+    setShowReUpload,
+    validFiles,
+    rejectedFiles,
+    files: [...validFiles, ...rejectedFiles],
+  }));
+
+  // Merge valid and rejected files
+  const files = [...validFiles, ...rejectedFiles];
+
+  return (
+    <div className={classify(css.wrapper, classNames?.wrapper)}>
+      {Boolean(label) && (
+        <div className={css.label}>
+          <Truncate>{label}</Truncate>
+          {required && <span className={css.required}>{'*'}</span>}
+        </div>
+      )}
+
+      <UnstyledButton
+        disabled={disabled || !shouldAcceptFiles}
+        {...getRootProps()}
+        className={classify(css.dropzone, {
+          [css.disabled]: disabled || !shouldAcceptFiles,
+          [css.dragActive]: isDragActive,
+          [css.error]: error,
+        })}
+      >
+        <input {...getInputProps()} />
+        <div className={classify(css.instruction, classNames?.instruction)}>
+          {isDragActive ? draggingInstruction : instruction}
+        </div>
+        <div
+          className={classify(
+            css.secondaryInstruction,
+            classNames?.secondaryInstruction,
+          )}
+        >
+          {secondaryInstruction}
+        </div>
+      </UnstyledButton>
+
+      {files.length > 0 && (
+        <div className={css.files}>
+          {files.map((file: FileObject) => (
+            <React.Fragment key={file.id}>
+              <FileBlock
+                file={file}
+                onFileRefreshClick={onFileRefreshClick}
+                handleFileClear={handleFileClear}
+              />
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const FileBlock = ({
+  file,
+  onFileRefreshClick,
+  handleFileClear,
+}: FileBlockProps): React.Node => (
+  <>
+    <div className={css.file}>
+      <div className={css.fileInfo}>
+        <div className={css.fileNameBlock}>
+          <div className={css.icon}>
+            <FileStatusIcon file={file} />
+          </div>
+          <div className={css.fileName}>
+            <Truncate>{file.file.name}</Truncate>
+          </div>
+        </div>
+
+        {file.success && !!file.successMessage && (
+          <div className={css.fileSuccess}>
+            <Truncate>{file.successMessage}</Truncate>
+          </div>
+        )}
+
+        {file.reject && !!file.rejectReason && (
+          <div className={css.fileError}>
+            <Truncate>{file.rejectReason}</Truncate>
+          </div>
+        )}
+
+        {!!file.progress && (
+          <div className={css.progress}>
+            <LinearLoader
+              size="small"
+              value={file.progress === 'indeterminate' ? 0 : file.progress}
+              indeterminate={file.progress === 'indeterminate'}
+            ></LinearLoader>
+          </div>
+        )}
+      </div>
+      <div className={css.rightSection}>
+        {file.showReUpload && (
+          <div className={css.rightBlock}>
+            <ClickableIcon
+              name="refresh"
+              size="small"
+              onClick={() => onFileRefreshClick?.(file)}
+            />
+          </div>
+        )}
+
+        <div className={css.rightBlock}>
+          <CloseIcon size="small" onClick={() => handleFileClear?.(file.id)} />
+        </div>
+      </div>
+    </div>
+  </>
+);
+
+// This function returns the status of a file
+const getFileStatus = (file: FileObject) => {
+  if (file.progress) {
+    return 'progress';
+  }
+  if (file.success) {
+    return 'success';
+  }
+  if (file.reject) {
+    return 'error';
+  }
+
+  return 'default';
+};
+
+// This component renders the status icon for a file
+const FileStatusIcon = ({file}: {file: FileObject}) => {
+  const status = getFileStatus(file);
+  switch (status) {
+  case 'progress':
+    return <Icon size="small" name="loader" color="tertiary" />;
+  case 'success':
+    return <Icon size="small" name="check" color="success" />;
+  case 'error':
+    return (
+      <Icon
+        size="small"
+        name="circle-exclamation"
+        color="danger"
+        type="solid"
+      />
+    );
+
+  default:
+    return <Icon size="small" name="check" color="success" />;
+  }
+};
+
+export const FileUpload: React.AbstractComponent<
+  FileUploadProps,
+  FileUploadRef,
+> = React.forwardRef<FileUploadProps, FileUploadRef>(FileUploadBase);

package/lib/components/FileUpload/FileUpload.module.css

@@ -0,0 +1,185 @@
+@value (
+  colorTextSecondary,
+  colorBackgroundPrimary,
+  colorBackgroundTertiary,
+  colorBorderTertiary,
+  colorTextPrimary,
+  colorTextTertiary,
+  colorTextSuccess,
+  colorTextDisabled,
+  colorBorderPrimary,
+  colorBorderSecondary,
+  colorTextClickable,
+  colorTextDanger,
+  colorDangerLightest,
+  colorInformationLightest,
+  colorFocusPrimary
+) from '../../styles/variables/_color.css';
+
+@value (
+  borderWidthNone,
+  borderWidthPrimary,
+  borderRadiusMedium
+) from '../../styles/variables/_border.css';
+
+@value (
+  spaceXXSmall,
+  spaceXSmall,
+  spaceMedium,
+  spaceLarge
+) from '../../styles/variables/_space.css';
+
+@value (
+  size2,
+  size18,
+  size34
+  size48,
+  size50,
+  size70,
+  size125,
+  size240,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: sizeFluid;
+  gap: spaceXSmall;
+}
+
+.dropzone {
+  cursor: pointer;
+  display: flex;
+  flex-flow: column;
+  gap: spaceXSmall;
+  width: sizeFluid;
+  padding: spaceLarge;
+  justify-content: center;
+  align-items: center;
+  min-height: size125;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusMedium;
+  outline: none;
+  color: colorTextSecondary;
+  background-color: colorBackgroundTertiary;
+}
+
+.dropzone:hover,
+.dragActive {
+  border-color: colorBorderTertiary;
+  background-color: colorBackgroundPrimary;
+}
+
+.dropzone:focus {
+  background-color: colorBackgroundPrimary;
+  border-color: colorTextClickable;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone borderWidthPrimary
+    colorFocusPrimary;
+}
+
+.dropzone.disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  color: colorTextDisabled;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  background-color: colorBackgroundPrimary;
+}
+
+.instruction {
+  composes: buttonTextSmall from '../../styles/typography.module.css';
+  color: inherit;
+  text-decoration: underline;
+  max-width: size125;
+  text-align: center;
+}
+
+.secondaryInstruction {
+  composes: bodySmall from '../../styles/typography.module.css';
+  color: inherit;
+  max-width: size240;
+  text-align: center;
+}
+
+.files {
+  display: flex;
+  flex-flow: column;
+  gap: spaceXSmall;
+}
+
+.file {
+  display: flex;
+  height: size50;
+  padding: spaceXSmall;
+  align-items: center;
+  justify-content: space-between;
+  gap: spaceXSmall;
+  background-color: colorBackgroundPrimary;
+  border-bottom: borderWidthPrimary solid colorBorderSecondary;
+}
+
+.fileInfo {
+  display: flex;
+  flex-flow: column;
+  gap: spaceXSmall;
+  width: sizeFluid;
+}
+
+.fileNameBlock {
+  display: flex;
+  composes: formLabelMedium from '../../styles/typography.module.css';
+  color: colorTextPrimary;
+  gap: spaceXXSmall;
+  align-items: flex-start;
+}
+
+.fileName {
+  display: flex;
+  color: inherit;
+}
+
+.fileError,
+.fileSuccess {
+  composes: bodySmall from '../../styles/typography.module.css';
+  margin-left: calc(size18 + spaceXXSmall);
+  margin-top: calc(spaceXSmall * -1);
+}
+
+.fileError {
+  color: colorTextDanger;
+}
+
+.fileSuccess {
+  color: colorTextSuccess;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: size18;
+  min-height: size18;
+}
+
+.rightSection {
+  display: flex;
+}
+
+.rightBlock {
+  min-width: size34;
+  min-height: size34;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.label {
+  display: flex;
+  gap: spaceXXSmall;
+  composes: formLabelSmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.required {
+  color: colorTextDanger;
+}

package/lib/components/FileUpload/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FileUpload = require("./FileUpload");
+Object.keys(_FileUpload).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FileUpload[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FileUpload[key];
+    }
+  });
+});

package/lib/components/FileUpload/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './FileUpload';

package/lib/components/Input/Input.js

@@ -82,13 +82,13 @@ const Input_ = (props, ref) => {
   }, label ?? ''), "\xA0", required && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
     color: "danger"
   }, '*'))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.classify)(_InputModule.default.box, classNames?.box, {
+    className: (0, _classify.classify)(_InputModule.default.box, {
       [_InputModule.default.inputDisabled]: disabled ?? false,
       [_InputModule.default.medium]: size === 'medium',
       [_InputModule.default.small]: size === 'small',
       [_InputModule.default.locked]: locked,
       [_InputModule.default.color]: type === 'color'
-    }),
+    }, classNames?.box),
     onClick: !(disabled || locked) ? onContainerClick : null,
     ref: boxRef
   }, iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {

package/lib/components/Input/Input.js.flow

@@ -137,13 +137,17 @@ const Input_ = (props: InputProps, ref): React.Node => {
         </div>
       )}
       <div
-        className={classify(css.box, classNames?.box, {
-          [css.inputDisabled]: disabled ?? false,
-          [css.medium]: size === 'medium',
-          [css.small]: size === 'small',
-          [css.locked]: locked,
-          [css.color]: type === 'color',
-        })}
+        className={classify(
+          css.box,
+          {
+            [css.inputDisabled]: disabled ?? false,
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.locked]: locked,
+            [css.color]: type === 'color',
+          },
+          classNames?.box,
+        )}
         onClick={!(disabled || locked) ? onContainerClick : null}
         ref={boxRef}
       >

package/lib/components/Input/Input.module.css

@@ -17,7 +17,7 @@
 @value (
   borderRadiusMedium,
   borderRadiusSmall,
-  borderWidthSecondary,
+  borderWidthPrimary,
   borderWidthTertiary,
   borderWidthNone,
   borderRadiusXSmall
@@ -26,6 +26,7 @@
 @value (
   colorTextPrimary,
   colorTextSecondary,
+  colorTextTertiary,
   colorBorderPrimary,
   colorFillPrimary,
   colorFocusPrimary,
@@ -33,7 +34,8 @@
   colorTextDisabled,
   colorFillDisabled,
   colorTextDanger,
-  colorBackgroundTertiary
+  colorBackgroundTertiary,
+  colorBorderTertiary
 ) from '../../styles/variables/_color.css';
 
 .container {
@@ -48,10 +50,19 @@
   gap: spaceXSmall;
   height: size42;
   padding: spaceNone spaceSmall;
-  border: borderWidthSecondary solid colorBorderPrimary;
+  border: borderWidthPrimary solid colorBorderPrimary;
   background-color: colorBackgroundTertiary;
 }
 
+.wrapper:not(.withError) .box:not(.inputDisabled):not(.locked):hover {
+  border-color: colorBorderTertiary;
+}
+
+.wrapper:not(.withError):focus-within
+  .box:not(.inputDisabled):not(.locked):hover {
+  border-color: colorFillPrimary;
+}
+
 .locked {
   border-style: dashed;
 }
@@ -92,7 +103,7 @@
   cursor: inherit;
 }
 
-.wrapper:not(.inputDisabled):not(.withError):focus-within .box {
+.wrapper:not(.withError):focus-within .box:not(.inputDisabled) {
   border-color: colorFillPrimary;
   box-shadow: borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusPrimary;
@@ -105,7 +116,7 @@
 }
 
 input::placeholder {
-  color: colorTextSecondary;
+  color: colorTextTertiary;
 }
 
 .inputDisabled input::placeholder {

package/lib/components/LinearLoader/LinearLoader.js

@@ -15,7 +15,8 @@ const LinearLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     value,
     size = 'medium',
-    className
+    className,
+    indeterminate
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_LinearLoaderModule.default.lineContainer, {
@@ -25,10 +26,16 @@ const LinearLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, className),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
-    className: _LinearLoaderModule.default.progressBar,
+    className: (0, _classify.classify)(_LinearLoaderModule.default.progressBar, {
+      [_LinearLoaderModule.default.indeterminate]: indeterminate
+    }),
     style: {
       width: `${value + '%'}`
-    }
+    },
+    role: "progressbar",
+    "aria-valuenow": indeterminate ? undefined : value,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100"
   }));
 });
 exports.LinearLoader = LinearLoader;

package/lib/components/LinearLoader/LinearLoader.js.flow

@@ -11,13 +11,17 @@ export type LinearLoaderProps = {
   value: number,
   size?: 'large' | 'medium' | 'small',
   className?: string,
+  indeterminate?: boolean,
 };
 
 export const LinearLoader: React$AbstractComponent<
   LinearLoaderProps,
   HTMLDivElement,
 > = React.forwardRef<LinearLoaderProps, HTMLDivElement>(
-  ({value, size = 'medium', className}: LinearLoaderProps, ref): React.Node => (
+  (
+    {value, size = 'medium', className, indeterminate}: LinearLoaderProps,
+    ref,
+  ): React.Node => (
     <div
       className={classify(
         css.lineContainer,
@@ -30,7 +34,16 @@ export const LinearLoader: React$AbstractComponent<
       )}
       ref={ref}
     >
-      <div className={css.progressBar} style={{width: `${value + '%'}`}}></div>
+      <div
+        className={classify(css.progressBar, {
+          [css.indeterminate]: indeterminate,
+        })}
+        style={{width: `${value + '%'}`}}
+        role="progressbar"
+        aria-valuenow={indeterminate ? undefined : value}
+        aria-valuemin="0"
+        aria-valuemax="100"
+      ></div>
     </div>
   ),
 );