@spaced-out/ui-design-system 0.1.30 → 0.1.32

package/lib/components/LinearLoader/LinearLoader.module.css

@@ -1,6 +1,7 @@
 @value (
   borderRadiusSmall
 ) from '../../styles/variables/_border.css';
+
 @value (colorFillPrimary, colorBorderPrimary) from '../../styles/variables/_color.css';
 
 @value (
@@ -11,10 +12,18 @@
 ) from '../../styles/variables/_size.css';
 
 @value (
-  motionDurationSlow
+  motionDurationSlow,
+  motionDurationSlowest,
+  motionEaseInEaseOut
 ) from '../../styles/variables/_motion.css';
 
+@value (
+  spaceNone,
+  spaceFluid
+) from '../../styles/variables/_space.css';
+
 .lineContainer {
+  position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -41,3 +50,27 @@
   height: sizeFluid;
   transition: motionDurationSlow;
 }
+
+.indeterminate {
+  position: absolute;
+
+  animation: infiniteProgressBar calc(motionDurationSlowest * 3)
+    motionEaseInEaseOut;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}
+
+@keyframes infiniteProgressBar {
+  0% {
+    left: spaceNone;
+    width: spaceNone;
+  }
+  50% {
+    left: spaceNone;
+    width: spaceFluid;
+  }
+  100% {
+    left: spaceFluid;
+    width: spaceNone;
+  }
+}

package/lib/components/Modal/Modal.js

@@ -120,7 +120,8 @@ const Modal = _ref4 => {
     hideBackdrop = false,
     tapOutsideToClose = true,
     initialFocus = -1,
-    customAnimation
+    customAnimation,
+    size = 'small'
   } = _ref4;
   const {
     refs,
@@ -213,7 +214,7 @@ const Modal = _ref4 => {
     }, classNames?.backdrop),
     onClick: onBackdropClick
   }), isMounted && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ModalModule.default.modal, classNames?.content),
+    className: (0, _classify.default)(_ModalModule.default.modal, _ModalModule.default[size], classNames?.content),
     role: "dialog",
     style: {
       // Transition styles

package/lib/components/Modal/Modal.js.flow

@@ -51,13 +51,18 @@ export type ModalProps = {
   isOpen?: boolean,
   onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
   hideBackdrop?: boolean,
-  // This prop is removed now
-  removeWhenClosed?: boolean,
   tapOutsideToClose?: boolean,
   initialFocus?: number,
   customAnimation?: UseTransitionStylesProps,
 };
 
+export type ModalSize = 'small' | 'medium' | 'large';
+
+export type BaseModalProps = {
+  ...ModalProps,
+  size?: ModalSize,
+};
+
 export type ModalHeaderProps = {
   children?: React.Node,
   hideCloseBtn?: boolean,
@@ -189,7 +194,8 @@ export const Modal = ({
   tapOutsideToClose = true,
   initialFocus = -1,
   customAnimation,
-}: ModalProps): React.Node => {
+  size = 'small',
+}: BaseModalProps): React.Node => {
   const {refs, context} = useFloating({open: isOpen});
   const {isMounted, styles} = useTransitionStyles(
     context,
@@ -301,7 +307,7 @@ export const Modal = ({
         />
         {isMounted && (
           <div
-            className={classify(css.modal, classNames?.content)}
+            className={classify(css.modal, css[size], classNames?.content)}
             role="dialog"
             style={{
               // Transition styles

package/lib/components/Modal/Modal.module.css

@@ -1,6 +1,6 @@
 @value (colorBackgroundTertiary, colorBackgroundPrimary, colorBackdropFill) from '../../styles/variables/_color.css';
 @value (spaceNone, spaceSmall, spaceMedium, spaceXXSmall, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
-@value (sizeFluid, size60) from '../../styles/variables/_size.css';
+@value (sizeFluid, size60, size320, size480, size640) from '../../styles/variables/_size.css';
 @value (elevationNone, elevationModal, elevationBackdrop) from '../../styles/variables/_elevation.css';
 @value (opacity100, opacity0) from '../../styles/variables/_opacity.css';
 @value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
@@ -27,6 +27,18 @@
   border-radius: borderRadiusMedium;
 }
 
+.modal.small {
+  width: size320;
+}
+
+.modal.medium {
+  width: size480;
+}
+
+.modal.large {
+  width: size640;
+}
+
 .modalContainer.open.in .modal {
   opacity: opacity100;
   transform: translate(spaceNegHalfFluid, spaceNegHalfFluid) scale(1);

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

@@ -1,5 +1,6 @@
 //@flow strict
 export type {
+  BaseModalProps,
   ModalBodyProps,
   ModalFooterProps,
   ModalHeaderProps,

package/lib/components/Textarea/Textarea.js

@@ -59,12 +59,12 @@ const Textarea_ = (props, ref) => {
   }, '*')), /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
     color: error || textCountError ? 'danger' : 'secondary'
   }, !!textCountLimit && (value && value.length || 0) + '/' + textCountLimit)), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.classify)(_TextareaModule.default.box, classNames?.box, {
+    className: (0, _classify.classify)(_TextareaModule.default.box, {
       [_TextareaModule.default.inputDisabled]: disabled ?? false,
       [_TextareaModule.default.medium]: size === 'medium',
       [_TextareaModule.default.small]: size === 'small',
       [_TextareaModule.default.locked]: locked
-    })
+    }, classNames?.box)
   }, /*#__PURE__*/React.createElement("textarea", _extends({}, textareaProps, {
     disabled: locked || disabled,
     name: name,

package/lib/components/Textarea/Textarea.js.flow

@@ -91,12 +91,16 @@ const Textarea_ = (props: TextareaProps, 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,
-        })}
+        className={classify(
+          css.box,
+          {
+            [css.inputDisabled]: disabled ?? false,
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.locked]: locked,
+          },
+          classNames?.box,
+        )}
       >
         <textarea
           {...textareaProps}

package/lib/components/Textarea/Textarea.module.css

@@ -14,14 +14,14 @@
 @value (
   borderRadiusMedium,
   borderRadiusSmall,
-  borderWidthSecondary,
+  borderWidthPrimary,
   borderWidthTertiary,
   borderWidthNone
 ) from '../../styles/variables/_border.css';
 
 @value (
   colorTextPrimary,
-  colorTextSecondary,
+  colorTextTertiary,
   colorBorderPrimary,
   colorFillPrimary,
   colorFocusPrimary,
@@ -29,7 +29,8 @@
   colorTextDisabled,
   colorFillDisabled,
   colorTextDanger,
-  colorBackgroundTertiary
+  colorBackgroundTertiary,
+  colorBorderTertiary
 ) from '../../styles/variables/_color.css';
 
 .container {
@@ -43,10 +44,19 @@
   color: colorTextPrimary;
   gap: spaceSmall;
   height: size160;
-  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;
+}
+
 .box textarea {
   padding: spaceXSmall spaceSmall;
 }
@@ -82,7 +92,7 @@
   resize: none;
 }
 
-.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;
@@ -95,7 +105,7 @@
 }
 
 textarea::placeholder {
-  color: colorTextSecondary;
+  color: colorTextTertiary;
 }
 
 .inputDisabled textarea::placeholder {

package/lib/components/index.js

@@ -201,6 +201,17 @@ Object.keys(_ErrorMessage).forEach(function (key) {
     }
   });
 });
+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];
+    }
+  });
+});
 var _FocusManager = require("./FocusManager");
 Object.keys(_FocusManager).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -18,6 +18,7 @@ export * from './Dialog';
 export * from './Dropdown';
 export * from './EmptyState';
 export * from './ErrorMessage';
+export * from './FileUpload';
 export * from './FocusManager';
 export * from './Grid';
 export * from './Icon';

package/lib/hooks/index.js

@@ -14,6 +14,17 @@ Object.keys(_useCopyToClipboard).forEach(function (key) {
     }
   });
 });
+var _useFileUpload = require("./useFileUpload");
+Object.keys(_useFileUpload).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFileUpload[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useFileUpload[key];
+    }
+  });
+});
 var _useInputState = require("./useInputState");
 Object.keys(_useInputState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -1,6 +1,7 @@
 // @flow strict
 
 export * from './useCopyToClipboard';
+export * from './useFileUpload';
 export * from './useInputState';
 export * from './useLockedBody';
 export * from './useMountTransition';

package/lib/hooks/useFileUpload/index.js

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

package/lib/hooks/useFileUpload/index.js.flow

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

package/lib/hooks/useFileUpload/useFileUpload.js

@@ -0,0 +1,279 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFileUpload = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDropzone = require("react-dropzone");
+var _helpers = require("../../utils/helpers");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// $FlowFixMe[untyped-import]
+
+const initialState = {
+  validFiles: [],
+  rejectedFiles: []
+};
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'ADD_VALID_FILES':
+      return {
+        ...state,
+        validFiles: [...state.validFiles, ...action.files]
+      };
+    case 'ADD_REJECTED_FILES':
+      return {
+        ...state,
+        rejectedFiles: [...state.rejectedFiles, ...action.files]
+      };
+    case 'REMOVE_FILE':
+      return {
+        ...state,
+        validFiles: state.validFiles.filter(file => file.id !== action.id),
+        rejectedFiles: state.rejectedFiles.filter(file => file.id !== action.id)
+      };
+    case 'CLEAR_FILES':
+      return {
+        validFiles: [],
+        rejectedFiles: []
+      };
+    case 'UPDATE_FILE_PROGRESS':
+      return {
+        ...state,
+        validFiles: state.validFiles.map(file => file.id === action.id ? {
+          ...file,
+          progress: action.progress,
+          showReUpload: false,
+          successMessage: undefined,
+          rejectReason: undefined
+        } : file),
+        rejectedFiles: state.rejectedFiles.map(file => file.id === action.id ? {
+          ...file,
+          progress: action.progress,
+          showReUpload: false,
+          successMessage: undefined,
+          rejectReason: undefined
+        } : file)
+      };
+    case 'SET_FILE_RE_UPLOAD':
+      return {
+        ...state,
+        validFiles: state.validFiles.map(file => file.id === action.id ? {
+          ...file,
+          progress: undefined,
+          showReUpload: action.showReUpload
+        } : file),
+        rejectedFiles: state.rejectedFiles.map(file => file.id === action.id ? {
+          ...file,
+          progress: undefined,
+          showReUpload: action.showReUpload
+        } : file)
+      };
+    case 'SET_FILE_SUCCESS':
+      {
+        // Note: When a file is accepted manually we would move a file from rejected files(if found) to valid files first
+        const fileIndex = state.rejectedFiles.findIndex(file => file.id === action.id);
+        let validFiles = [...state.validFiles];
+        const rejectedFiles = [...state.rejectedFiles];
+        if (fileIndex !== -1) {
+          const file = rejectedFiles[fileIndex];
+          rejectedFiles.splice(fileIndex, 1);
+          validFiles = [...validFiles, {
+            ...file
+          }];
+        }
+        validFiles = validFiles.map(file => file.id === action.id ? {
+          ...file,
+          success: true,
+          successMessage: action.successMessage,
+          reject: false,
+          rejectReason: undefined,
+          progress: undefined,
+          showReUpload: false
+        } : file);
+        return {
+          ...state,
+          validFiles,
+          rejectedFiles
+        };
+      }
+    case 'SET_FILE_REJECT':
+      {
+        // Note: When a file is rejected manually we would move a file from valid files(if found) to rejected files first
+        const fileIndex = state.validFiles.findIndex(file => file.id === action.id);
+        const validFiles = [...state.validFiles];
+        let rejectedFiles = [...state.rejectedFiles];
+        if (fileIndex !== -1) {
+          const file = validFiles[fileIndex];
+          validFiles.splice(fileIndex, 1);
+          rejectedFiles = [...rejectedFiles, {
+            ...file
+          }];
+        }
+        rejectedFiles = rejectedFiles.map(file => file.id === action.id ? {
+          ...file,
+          reject: true,
+          rejectReason: action.rejectReason,
+          success: false,
+          successMessage: undefined,
+          progress: undefined,
+          showReUpload: false
+        } : file);
+        return {
+          ...state,
+          validFiles,
+          rejectedFiles
+        };
+      }
+    default:
+      return state;
+  }
+};
+
+// This is a map of error codes returned by react-dropzone and their corresponding error messages
+const DROPZONE_ERROR_MESSAGES = {
+  'file-too-large': 'File exceeds maximum size',
+  'file-invalid-type': 'Wrong file type',
+  'too-many-files': 'Too many files',
+  'file-too-small': 'File is too small'
+};
+const useFileUpload = _ref => {
+  let {
+    maxFiles = 1,
+    maxSize,
+    accept,
+    disabled,
+    onValidFilesDrop,
+    onRejectedFilesDrop,
+    onFileClear,
+    onClear
+  } = _ref;
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+
+  // Callbacks for when files are dropped / selected and are valid
+  const handleDropAccepted = acceptedFiles => {
+    const validFiles = acceptedFiles.map(file => ({
+      file,
+      id: (0, _helpers.uuid)(),
+      reject: false,
+      rejectReason: undefined,
+      success: true,
+      successMessage: undefined,
+      progress: undefined,
+      showReUpload: false
+    }));
+    dispatch({
+      type: 'ADD_VALID_FILES',
+      files: validFiles
+    });
+    onValidFilesDrop?.(validFiles);
+  };
+
+  // Callbacks for when files are dropped / selected and are invalid
+  const handleDropRejected = fileRejections => {
+    const rejectedFiles = fileRejections.map(_ref2 => {
+      let {
+        file,
+        errors
+      } = _ref2;
+      return {
+        file,
+        id: (0, _helpers.uuid)(),
+        reject: true,
+        rejectReason: DROPZONE_ERROR_MESSAGES[errors[0].code] || 'Some error occurred uploading this file',
+        success: false,
+        successMessage: undefined,
+        progress: undefined,
+        showReUpload: false
+      };
+    });
+    dispatch({
+      type: 'ADD_REJECTED_FILES',
+      files: rejectedFiles
+    });
+    onRejectedFilesDrop?.(rejectedFiles);
+  };
+  const handleFileClear = id => {
+    dispatch({
+      type: 'REMOVE_FILE',
+      id
+    });
+    onFileClear?.(id);
+  };
+  const handleClear = () => {
+    dispatch({
+      type: 'CLEAR_FILES'
+    });
+    onClear?.();
+  };
+  const moveFileToProgress = (id, progress) => {
+    dispatch({
+      type: 'UPDATE_FILE_PROGRESS',
+      id,
+      progress
+    });
+  };
+
+  // Note(Nishant): If the file is found in rejected files, we move it to valid files first in the reducer
+  const moveFileToSuccess = (id, successMessage) => {
+    dispatch({
+      type: 'SET_FILE_SUCCESS',
+      id,
+      successMessage
+    });
+  };
+
+  // Note(Nishant): If the file is found in valid files, we move it to rejected files first in the reducer
+  const moveFileToReject = (id, rejectReason) => {
+    dispatch({
+      type: 'SET_FILE_REJECT',
+      id,
+      rejectReason
+    });
+  };
+
+  // Note: This is used to show the re-upload button on the file
+  const setShowReUpload = (id, showReUpload) => {
+    dispatch({
+      type: 'SET_FILE_RE_UPLOAD',
+      id,
+      showReUpload
+    });
+  };
+  const totalFiles = state.validFiles.length + state.rejectedFiles.length;
+  const shouldAcceptFiles = !disabled && (maxFiles === 0 || totalFiles < maxFiles);
+
+  // We are using react-dropzone's useDropzone hook to get the drag and drop props
+  const {
+    isDragActive,
+    getRootProps,
+    getInputProps
+  } = (0, _reactDropzone.useDropzone)({
+    maxFiles,
+    multiple: maxFiles > 1 || maxFiles === 0,
+    maxSize,
+    accept,
+    disabled,
+    noClick: !shouldAcceptFiles,
+    noDrag: !shouldAcceptFiles,
+    onDropAccepted: handleDropAccepted,
+    onDropRejected: handleDropRejected
+  });
+  return {
+    validFiles: state.validFiles,
+    rejectedFiles: state.rejectedFiles,
+    shouldAcceptFiles,
+    isDragActive,
+    getRootProps,
+    getInputProps,
+    handleFileClear,
+    handleClear,
+    moveFileToProgress,
+    moveFileToSuccess,
+    moveFileToReject,
+    setShowReUpload
+  };
+};
+exports.useFileUpload = useFileUpload;