@spaced-out/ui-design-system 0.3.38 → 0.3.39

package/lib/components/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,86 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../utils/classify';
+import {
+  ForbiddenImage,
+  NotFoundImage,
+  ServerErrorImage,
+  UnauthorizedImage,
+} from './ErrorImages';
+import css from './ErrorMessage.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  image?: string;
+  heading?: string;
+  title?: string;
+  description?: string;
+  children?: string;
+}>;
+export type ErrorMessageProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+  imageVariant?: 'unauthorized' | 'forbidden' | 'notFound' | 'serverError';
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  heading?: React.ReactNode;
+  customImageUrl?: string;
+};
+export const ErrorMessage: React$AbstractComponent<
+  ErrorMessageProps,
+  HTMLDivElement
+> = React.forwardRef<ErrorMessageProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      children,
+      imageVariant,
+      title,
+      description,
+      customImageUrl,
+      heading,
+      ...props
+    }: ErrorMessageProps,
+    ref,
+  ): React.ReactNode => (
+    <div
+      {...props}
+      data-testid="ErrorMessage"
+      className={classify(css.wrapper, classNames?.wrapper)}
+      ref={ref}
+    >
+      {!!imageVariant && !customImageUrl && (
+        <div className={classify(css.image, classNames?.image)}>
+          {imageVariant === 'unauthorized' && <UnauthorizedImage />}
+          {imageVariant === 'forbidden' && <ForbiddenImage />}
+          {imageVariant === 'notFound' && <NotFoundImage />}
+          {imageVariant === 'serverError' && <ServerErrorImage />}
+        </div>
+      )}
+      {customImageUrl && (
+        <img
+          className={classify(css.image, classNames?.image)}
+          src={customImageUrl}
+          alt="Empty State"
+        />
+      )}
+      {!!heading && (
+        <div className={classify(css.heading, classNames?.heading)}>
+          {heading}
+        </div>
+      )}
+      {!!title && (
+        <div className={classify(css.title, classNames?.title)}>{title}</div>
+      )}
+      {!!description && (
+        <div className={classify(css.description, classNames?.description)}>
+          {description}
+        </div>
+      )}
+      {!!children && (
+        <div className={classify(css.childrenWrapper, classNames?.children)}>
+          {children}
+        </div>
+      )}
+    </div>
+  ),
+);

package/lib/components/ErrorMessage/index.d.ts

@@ -0,0 +1 @@
+export * from './ErrorMessage';

package/lib/components/FileUpload/FileBlock/FileBlock.d.ts

@@ -0,0 +1,137 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../../utils/classify';
+import {ClickableIcon, CloseIcon, Icon} from '../../Icon';
+import {LinearLoader} from '../../LinearLoader';
+import {Truncate} from '../../Truncate';
+import type {FileObject} from '../FileUpload';
+import css from '../FileUpload.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type FileBlockProps = {
+  classNames?: ClassNames;
+  fileObject: FileObject;
+  onFileRefreshClick?: (file: FileObject) => unknown;
+  handleFileClear?: (id: string) => unknown;
+};
+export const FileBlock: React$AbstractComponent<
+  FileBlockProps,
+  HTMLDivElement
+> = React.forwardRef<FileBlockProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      fileObject,
+      onFileRefreshClick,
+      handleFileClear,
+    }: FileBlockProps,
+    ref,
+  ): React.ReactNode => (
+    <>
+      <div className={classify(css.file, classNames?.wrapper)} ref={ref}>
+        <div className={css.fileInfo}>
+          <div className={css.fileNameBlock}>
+            <div className={css.icon}>
+              <FileStatusIcon fileObject={fileObject} />
+            </div>
+            <div className={css.fileName}>
+              <Truncate>{fileObject.file.name}</Truncate>
+            </div>
+          </div>
+
+          {fileObject.success &&
+            !!fileObject.successMessage &&
+            !fileObject.progress && (
+              <div className={css.fileSuccess}>
+                <Truncate>{fileObject.successMessage}</Truncate>
+              </div>
+            )}
+
+          {fileObject.reject &&
+            !!fileObject.rejectReason &&
+            !fileObject.progress && (
+              <div className={css.fileError}>
+                <Truncate>{fileObject.rejectReason}</Truncate>
+              </div>
+            )}
+
+          {!!fileObject.progress && (
+            <div className={css.progress}>
+              <LinearLoader
+                size="small"
+                value={
+                  fileObject.progress === 'indeterminate'
+                    ? 0
+                    : fileObject.progress
+                }
+                indeterminate={fileObject.progress === 'indeterminate'}
+              ></LinearLoader>
+            </div>
+          )}
+        </div>
+        <div className={css.rightSection}>
+          {fileObject.showReUpload && (
+            <div className={css.rightBlock}>
+              <ClickableIcon
+                name="refresh"
+                size="small"
+                onClick={() => onFileRefreshClick?.(fileObject)}
+              />
+            </div>
+          )}
+
+          <div className={css.rightBlock}>
+            <CloseIcon
+              size="small"
+              onClick={() => handleFileClear?.(fileObject.id)}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  ),
+);
+
+// This function returns the status of a file
+const getFileStatus = (fileObject: FileObject) => {
+  if (fileObject.progress) {
+    return 'progress';
+  }
+
+  if (fileObject.success) {
+    return 'success';
+  }
+
+  if (fileObject.reject) {
+    return 'error';
+  }
+
+  return 'default';
+};
+
+// This component renders the status icon for a file
+const FileStatusIcon = ({fileObject}: {fileObject: FileObject}) => {
+  const status = getFileStatus(fileObject);
+
+  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" />;
+  }
+};

package/lib/components/FileUpload/FileBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './FileBlock';

package/lib/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,190 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+// @ts-expect-error[untyped-import] -- this should be fixed soon
+import type {UseFileUploadReturnProps} from '../../hooks/useFileUpload';
+import {useFileUpload} from '../../hooks/useFileUpload';
+import classify from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import {Truncate} from '../Truncate';
+import {FileBlock} from './FileBlock';
+import css from './FileUpload.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  instruction?: string;
+  secondaryInstruction?: string;
+  dropZone?: string;
+  files?: 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) => unknown;
+  moveFileToSuccess: (id: string, successMessage?: string) => unknown;
+  moveFileToReject: (id: string, rejectReason?: string) => unknown;
+  setShowReUpload: (id: string, showReUpload?: boolean) => unknown;
+  handleFileClear: (id: string) => unknown;
+  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?: Record<string, string[]>;
+  disabled?: boolean;
+  // File drop callbacks
+  onValidFilesDrop?: (acceptedFiles: Array<FileObject>) => unknown;
+  onRejectedFilesDrop?: (fileRejections: Array<FileObject>) => unknown;
+  // File clear callbacks
+  onFileClear?: (id: string) => unknown;
+  onClear?: () => unknown;
+};
+export type FileUploadProps = FileUploadBaseProps & {
+  classNames?: ClassNames;
+  label?: React.ReactNode;
+  instruction?: React.ReactNode;
+  draggingInstruction?: React.ReactNode;
+  secondaryInstruction?: React.ReactNode;
+  required?: boolean;
+  handleFileDeletionExternally?: boolean;
+  // File refresh callback
+  onFileRefreshClick?: (file: FileObject) => unknown;
+};
+
+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,
+    handleFileDeletionExternally,
+  } = 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,
+    handleFileClear,
+    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,
+          },
+          classNames?.dropZone,
+        )}
+      >
+        <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((fileObject: FileObject) => (
+            <React.Fragment key={fileObject.id}>
+              <FileBlock
+                fileObject={fileObject}
+                onFileRefreshClick={onFileRefreshClick}
+                handleFileClear={
+                  handleFileDeletionExternally ? onFileClear : handleFileClear
+                }
+                classNames={{
+                  wrapper: classNames?.files,
+                }}
+              />
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const FileUpload: React.AbstractComponent<
+  FileUploadProps,
+  FileUploadRef
+> = React.forwardRef<FileUploadProps, FileUploadRef>(FileUploadBase);

package/lib/components/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FileBlock';
+export * from './FileUpload';

package/lib/components/FocusManager/FocusManager.d.ts

@@ -0,0 +1,52 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager, // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import classify from '../../utils/classify';
+import css from './FocusManager.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type FocusManagerProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+  initialFocus?: number;
+  returnFocus?: boolean;
+  guards?: boolean;
+  modal?: boolean;
+};
+export const FocusManager = (props: FocusManagerProps): React.ReactNode => {
+  const {refs, context} = useFloating({
+    open: true,
+  });
+  const {
+    classNames,
+    children,
+    initialFocus = -1,
+    returnFocus = true,
+    modal = true,
+    guards = true,
+    ...restFloatingFocusManagerProps
+  } = props;
+  return (
+    <FloatingFocusManager
+      context={context}
+      initialFocus={initialFocus}
+      modal={modal}
+      guards={guards}
+      returnFocus={returnFocus}
+      {...restFloatingFocusManagerProps}
+    >
+      <div
+        ref={refs.setFloating}
+        data-testid="FocusManager"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {children}
+      </div>
+    </FloatingFocusManager>
+  );
+};

package/lib/components/FocusManager/index.d.ts

@@ -0,0 +1 @@
+export * from './FocusManager';

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.d.ts

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager, // $FlowFixMe[untyped-import]
+  useFloating, // $FlowFixMe[untyped-import]
+  useInteractions, // $FlowFixMe[untyped-import]
+  useListNavigation,
+} from '@floating-ui/react';
+import classify from '../../utils/classify';
+import type {FocusManagerProps} from '../FocusManager';
+import css from './FocusManagerWithArrowKeyNavigation.module.css';
+const SKIP_ELEMENT_DISPLAY_NAME = 'SkipElementFromNavigation';
+export type SkipElementFromNavigationProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+export const SkipElementFromNavigation: React$AbstractComponent<
+  SkipElementFromNavigationProps,
+  HTMLDivElement
+> = React.forwardRef<SkipElementFromNavigationProps, HTMLDivElement>(
+  (
+    {children, className, ...restProps}: SkipElementFromNavigationProps,
+    ref,
+  ) => (
+    <div {...restProps} className={className} tabIndex={-1} ref={ref}>
+      {children}
+    </div>
+  ),
+);
+SkipElementFromNavigation.displayName = SKIP_ELEMENT_DISPLAY_NAME;
+export type FocusManagerWithArrowKeyNavigationProps = FocusManagerProps & {
+  cols?: number;
+  orientation?: 'horizontal' | 'vertical';
+  focusItemOnOpen?: 'auto' | boolean;
+  loop?: boolean;
+  listReference?: {
+    current: Array<HTMLElement>;
+  };
+};
+export const FocusManagerWithArrowKeyNavigation = (
+  props: FocusManagerWithArrowKeyNavigationProps,
+): React.ReactNode => {
+  const {
+    classNames,
+    children,
+    initialFocus = -1,
+    orientation = 'vertical',
+    modal = false,
+    cols = 1,
+    focusItemOnOpen = 'auto',
+    loop = false,
+    listReference,
+    ...restFloatingFocusManagerProps
+  } = props;
+  const {refs, context} = useFloating({
+    open: true,
+  });
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const listRef = React.useRef([]);
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  // Note(Nishant): This is to correctly call the onClick handler which could have been on child
+  // we also need to set the active index correctly on click for list navigation to work
+  const childOnClickPassthrough = (childOnClickHandler, index, ...args) => {
+    if (childOnClickHandler) {
+      childOnClickHandler(...args);
+    }
+
+    setActiveIndex(index);
+  };
+
+  // Add childOnClickPassthrough for the list of references passed in case of custom nodes passed
+  if (listReference) {
+    listReference.current.map((element, index) => {
+      const childClickHandler = element.onclick;
+
+      element.onclick = (...args) => {
+        childOnClickPassthrough(childClickHandler, index, ...args);
+      };
+    });
+  }
+
+  // Note(Nishant): Force the list navigation props onto the children
+  // while using this component make sure your all the passed children have a focus state
+  let skippedChildrenCount = 0;
+  const clonedChildren = listReference
+    ? children
+    : childrenArray.map((child, index) => {
+        const {onClick: childClickHandler} = child.props;
+        let adjustedIndex = index - skippedChildrenCount;
+
+        if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
+          skippedChildrenCount++;
+          adjustedIndex = null;
+        }
+
+        return React.cloneElement(child, {
+          ...child.props,
+          tabIndex: activeIndex === index ? 0 : -1,
+          ref: (node) => {
+            if (adjustedIndex !== null) {
+              listRef.current[adjustedIndex] = node;
+            }
+          },
+          onClick: (...args) => {
+            childOnClickPassthrough(childClickHandler, adjustedIndex, ...args);
+          },
+        });
+      });
+  const listNavigation = useListNavigation(context, {
+    orientation,
+    cols,
+    listRef: listReference ? listReference : listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    focusItemOnOpen,
+    loop,
+  });
+  const {getFloatingProps} = useInteractions([listNavigation]);
+  return (
+    <FloatingFocusManager
+      context={context}
+      modal={modal}
+      initialFocus={initialFocus}
+      {...restFloatingFocusManagerProps}
+    >
+      <div
+        ref={refs.setFloating}
+        data-testid="FocusManagerWithArrowKeyNavigation"
+        {...getFloatingProps()}
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {clonedChildren}
+      </div>
+    </FloatingFocusManager>
+  );
+};

package/lib/components/FocusManagerWithArrowKeyNavigation/index.d.ts

@@ -0,0 +1 @@
+export * from './FocusManagerWithArrowKeyNavigation';

package/lib/components/FormTitleWrapper/FormTitleWrapper.d.ts

@@ -0,0 +1,62 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import css from './FormTitleWrapper.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  title?: string;
+  rightSlot?: string;
+}>;
+export type FormTitleWrapperProps = {
+  classNames?: ClassNames;
+  iconType?: IconType;
+  iconName?: string;
+  iconSize?: IconSize;
+  iconColor?: ColorTypes;
+  title: React.ReactNode;
+  // Should always atleast have a title
+  rightSlot?: React.ReactNode;
+};
+export const FormTitleWrapper: React$AbstractComponent<
+  FormTitleWrapperProps,
+  HTMLDivElement
+> = React.forwardRef<FormTitleWrapperProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      iconType,
+      iconName,
+      iconSize = 'small',
+      iconColor,
+      title,
+      rightSlot,
+    }: FormTitleWrapperProps,
+    ref,
+  ) => (
+    <div ref={ref} data-testid="FormTitleWrapper" className={css.container}>
+      <div className={classify(css.leftSection, classNames?.wrapper)}>
+        {!!iconName && (
+          <Icon
+            type={iconType}
+            name={iconName}
+            size={iconSize}
+            color={iconColor}
+          />
+        )}
+        {/* This is to safeguard semantics as it internally composes from a subTitleSmall className
+         we don't fix the component here as <SubtitleSmall> resolves to <h4> and since title is a React.Node,
+         this would break semantics in case custom components are passed inside
+      */}
+        <div className={classify(css.componentHousing, classNames?.title)}>
+          {title}
+        </div>
+      </div>
+      <div className={classify(css.rightSection, classNames?.rightSlot)}>
+        {rightSlot}
+      </div>
+    </div>
+  ),
+);

package/lib/components/FormTitleWrapper/index.d.ts

@@ -0,0 +1 @@
+export * from './FormTitleWrapper';