@heliux-org/design-system-core 0.0.34 → 0.0.35

package/dist/types/components/Uploader/Uploader.d.ts

@@ -0,0 +1,35 @@
+import './Uploader.scss';
+import { VibeComponentProps } from 'src/types';
+export type UploadError = {
+    message: string;
+};
+export type UploaderOnDeleteCallback = (file: UploaderFile) => Promise<boolean>;
+export type UploaderOnSuccessCallback<Result extends any> = (result: Result) => void;
+export type UploaderOnErrorCallback = (error: Error) => void;
+export type UploaderUploadFunction<Result extends any> = (nativeFile: File) => Promise<Result>;
+export type UploaderProcessingFunction<Result extends any> = (result: Result) => Promise<void>;
+export interface UploaderFile {
+    name: string;
+    size: number;
+    uploadStartedAt: number;
+    uploadPercent: number;
+    isProcessing: boolean;
+    temporaryId: string;
+    error?: Error;
+}
+export interface UploaderProps<Result extends any> extends VibeComponentProps {
+    fileTypeHint?: string;
+    initialFiles?: Array<{
+        name: string;
+        size: number;
+        error?: Error;
+    }>;
+    onDelete?: UploaderOnDeleteCallback;
+    onUploadSuccess?: UploaderOnSuccessCallback<Result>;
+    onUploadError?: UploaderOnErrorCallback;
+    processingFunction?: UploaderProcessingFunction<Result>;
+    uploadFunction: UploaderUploadFunction<Result>;
+}
+export declare function Uploader<Result extends any>({ className, "data-testid": testId, id, fileTypeHint, initialFiles, uploadFunction, processingFunction, onUploadSuccess, onUploadError, onDelete, }: UploaderProps<Result>): import("react/jsx-runtime").JSX.Element;
+export declare const BasicUploader: ({ className, "data-testid": testId, id, fileTypeHint, initialFiles, uploadFunction, processingFunction, onUploadSuccess, onUploadError, onDelete, }: UploaderProps<void>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Uploader.d.ts.map

package/dist/types/components/Uploader/Uploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Uploader.d.ts","sourceRoot":"","sources":["../../../../src/components/Uploader/Uploader.tsx"],"names":[],"mappings":"AAKA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AAChF,MAAM,MAAM,yBAAyB,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AACrF,MAAM,MAAM,uBAAuB,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAC7D,MAAM,MAAM,sBAAsB,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAC/F,MAAM,MAAM,0BAA0B,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/F,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,aAAa,CAAC,MAAM,SAAS,GAAG,CAAE,SAAQ,kBAAkB;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,KAAK,CAAC;KACjB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,wBAAwB,CAAC;IACpC,eAAe,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,kBAAkB,CAAC,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACxD,cAAc,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC;CAClD;AAKD,wBAAgB,QAAQ,CAAC,MAAM,SAAS,GAAG,EAAE,EACzC,SAAS,EACT,aAAa,EAAE,MAAM,EACrB,EAAE,EACF,YAAY,EACZ,YAAiB,EACjB,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,QAAQ,GACX,EAAE,aAAa,CAAC,MAAM,CAAC,2CAgNvB;AAED,eAAO,MAAM,aAAa,uNAAiB,CAAC"}

package/dist/types/components/Uploader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Uploader';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Uploader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Uploader/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/types/components/index.d.ts

@@ -130,4 +130,5 @@ export { default as Workflow } from "./Workflow/Workflow";
 export { Step } from "./Workflow/Workflow";
 export { ButtonType } from "./Button/ButtonConstants";
 export { default as NumericField } from "./NumericField/NumericField";
+export { Uploader, BasicUploader } from "./Uploader/Uploader";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heliux-org/design-system-core",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "Official Heliux design system resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types/index.d.ts",
@@ -295,5 +295,5 @@
       "PR: Icon 💎": "New Icons"
     }
   },
-  "gitHead": "161834a98bab4b3bdf0e7e677a352508b9adc94d"
+  "gitHead": "df1653ac1952f39e4f2d117aa0a017b877adce92"
 }

package/src/components/TopNavigationBar/TopNavigationBar.tsx

@@ -17,9 +17,20 @@ import { NotificationItem } from "./components/NotificationItem/NotificationItem
 export interface NavbarProps {
   children: ReactNode;
   className?: string;
+  sticky?: boolean;
 }
-export const Navbar: React.FC<NavbarProps> = ({ children, className }) => {
-  return <nav className={`${styles.navbar} ${className}`}>{children}</nav>;
+export const Navbar: React.FC<NavbarProps> = ({
+  children,
+  className,
+  sticky = true,
+}) => {
+  return (
+    <nav
+      className={`${styles.navbar} ${className} ${sticky ? styles.sticky : ""}`}
+    >
+      {children}
+    </nav>
+  );
 };
 
 export interface NavbarContainerProps {
@@ -134,15 +145,11 @@ export const SpanStyled: React.FC<SpanStyledProps> = ({
 
 export interface TopNavigationBarProps {
   children: ReactNode;
-  sticky?: boolean;
 }
 
-const TopNavigationBar: React.FC<TopNavigationBarProps> = ({
-  children,
-  sticky = true,
-}) => {
+const TopNavigationBar: React.FC<TopNavigationBarProps> = () => {
   return (
-    <Navbar className={sticky ? `${styles.sticky}` : ""}>
+    <Navbar>
       <NavbarContainer>
         <IconButton ariaLabel="Add" icon={Lines} size="xs" />
         <LogoContainer>

package/src/components/Uploader/Uploader.scss

@@ -0,0 +1,109 @@
+@import "~heliux-ui-style/dist/mixins";
+
+.hds-uploader {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+
+    border-radius: var(--border-radius-medium);
+    border: 1px dashed var(--divider-secondary);
+    background: var(--surface-primary);
+
+    &.hover {
+        border-color: var(--divider-active)
+    }
+
+    &-base {
+        width: 90%;
+        flex: 1;
+        display: flex;
+        padding: var(--spacing-large);
+        flex-direction: column;
+        align-items: center;
+
+
+        &-icon {
+            padding: var(--spacing-large);
+        }
+
+        &-text {
+            @include vibe-text(text1, normal);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            gap: 4px;
+            align-self: stretch;
+            color: var(--text-tertiary);
+        }
+    }
+
+    hr {
+        border: none;
+        border-top: 1px dashed var(--divider-secondary);
+        width: 90%;
+    }
+
+    &-file-input {
+        display: none;
+    }
+
+    &-file {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+
+
+        &-content {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            align-self: stretch;
+        }
+
+        &-icon {
+            padding: 0 var(--spacing-medium);
+        }
+
+        &-data {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 var(--spacing-medium);
+
+            .progress-bar {
+                width: 50%;
+            }
+        }
+
+        &-name {
+            @include vibe-text(text1, normal);
+            color: var(--text-link)
+        }
+
+        &-size {
+            @include vibe-text(text1, normal);
+            color: var(--text-tertiary)
+        }
+
+        &-processing {
+            @include vibe-text(text1, normal);
+            color: var(--text-secondary);
+        }
+
+        &-actions {
+            display: flex;
+        }
+
+        &.error {
+            color: var(--negative-color);
+        }
+
+        &-error-message {
+            @include vibe-text(text1, bold);
+            padding: 0 var(--spacing-medium);
+        }
+    }
+}

package/src/components/Uploader/Uploader.tsx

@@ -0,0 +1,268 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
+import { Attach, Delete, Upload } from '../Icon/Icons';
+import LinearProgressBar from '../ProgressBars/LinearProgressBar/LinearProgressBar';
+import './Uploader.scss';
+import classNames from 'classnames';
+import { VibeComponentProps } from 'src/types';
+
+export type UploadError = {
+    message: string;
+}
+
+export type UploaderOnDeleteCallback = (file: UploaderFile) => Promise<boolean>;
+export type UploaderOnSuccessCallback<Result extends any> = (result: Result) => void;
+export type UploaderOnErrorCallback = (error: Error) => void;
+export type UploaderUploadFunction<Result extends any> = (nativeFile: File) => Promise<Result>;
+export type UploaderProcessingFunction<Result extends any> = (result: Result) => Promise<void>;
+
+export interface UploaderFile {
+    name: string;
+    size: number;
+    uploadStartedAt: number;
+    uploadPercent: number;
+    isProcessing: boolean;
+    temporaryId: string;
+    error?: Error;
+}
+
+export interface UploaderProps<Result extends any> extends VibeComponentProps {
+    fileTypeHint?: string;
+    initialFiles?: Array<{
+        name: string;
+        size: number;
+        error?: Error;
+    }>;
+    onDelete?: UploaderOnDeleteCallback;
+    onUploadSuccess?: UploaderOnSuccessCallback<Result>;
+    onUploadError?: UploaderOnErrorCallback;
+    processingFunction?: UploaderProcessingFunction<Result>;
+    uploadFunction: UploaderUploadFunction<Result>;
+}
+
+// average time in ms it takes to upload 1MB
+const megabyteUploadTime = 1000;
+
+export function Uploader<Result extends any>({
+    className,
+    "data-testid": testId,
+    id,
+    fileTypeHint,
+    initialFiles = [],
+    uploadFunction,
+    processingFunction,
+    onUploadSuccess,
+    onUploadError,
+    onDelete,
+}: UploaderProps<Result>) {
+
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+    const [files, setFiles] = useState<Array<UploaderFile>>([]);
+    const [isDragging, setIsDragging] = useState(false);
+
+    useEffect(() => {
+        setFiles(initialFiles.map(({ name, size, error }) => {
+            return {
+                name,
+                size,
+                error,
+                uploadStartedAt: 0,
+                uploadPercent: 100,
+                isProcessing: false,
+                temporaryId: `${Math.random()}`,
+            };
+        }));
+    }, []);
+
+    const onDeleteClick = useCallback(async (file: UploaderFile) => {
+        if (onDelete) {
+            if (await onDelete(file)) {
+                setFiles((prevFiles) => prevFiles.filter((prevFile) => prevFile.temporaryId !== file.temporaryId));
+            }
+        }
+    }, [files, onDelete]);
+
+    const onUploadClick = useCallback(() => {
+        fileInputRef.current?.click();
+    }, [fileInputRef]);
+
+    const onFileSelected = useCallback(async (nativeFile?: File) => {
+        if (!nativeFile) return;
+
+        const newFile: UploaderFile = {
+            name: nativeFile.name,
+            size: nativeFile.size,
+            uploadPercent: 0,
+            uploadStartedAt: Date.now(),
+            isProcessing: false,
+            temporaryId: `${Math.random()}`,
+        };
+        let intervalId;
+
+        const updateFile = (update: Partial<UploaderFile>) => {
+            setFiles((prevFiles) => prevFiles.map((file) => {
+                if (file.temporaryId === newFile.temporaryId) {
+                    return {
+                        ...file,
+                        ...update,
+                    };
+                }
+
+                return file;
+            }));
+        };
+
+        try {
+            setFiles((prevFiles) => [...prevFiles, newFile]);
+
+            intervalId = window.setInterval(() => {
+                const sizeInMegabytes = newFile.size / 1024 / 1024;
+                const timeDiff = Date.now() - newFile.uploadStartedAt;
+                const predictedTotalTime = megabyteUploadTime * sizeInMegabytes;
+                const percent = Math.round((timeDiff / predictedTotalTime) * 100);
+
+                updateFile({
+                    uploadPercent: Math.min(percent, 98),
+                });
+            }, 800);
+
+            const result = await uploadFunction(nativeFile);
+
+            onUploadSuccess?.(result);
+
+            // stop early to avoid upload progress > 100%
+            clearInterval(intervalId);
+
+            updateFile({
+                isProcessing: !!processingFunction,
+                uploadPercent: 100,
+            });
+
+            if (processingFunction) {
+                await processingFunction(result);
+
+                updateFile({
+                    isProcessing: false,
+                });
+            }
+
+        } catch (e: any) {
+            if (intervalId) window.clearInterval(intervalId);
+            onUploadError?.(e);
+
+            updateFile({
+                isProcessing: false,
+                uploadPercent: 100,
+                error: e,
+            });
+        }
+    }, [onUploadSuccess, processingFunction, uploadFunction]);
+
+    const onFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        // noinspection JSIgnoredPromiseFromCall
+        onFileSelected(e.target.files?.[0]);
+    }, [onFileSelected]);
+
+    const onDragTypeEvent = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(e.type === 'dragover');
+    }, []);
+
+    const onDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+        onDragTypeEvent(e);
+        // noinspection JSIgnoredPromiseFromCall
+        onFileSelected(e.dataTransfer.files[0]);
+        setIsDragging(false);
+    }, [onDragTypeEvent, onFileSelected]);
+
+    const classes = classNames({
+        'hds-uploader': true,
+        'hover': isDragging,
+        [`${className}`]: !!className,
+    });
+
+    const renderedFiles = useMemo(() => files.map((file) => {
+        const isFileReady = file.uploadPercent === 100 && !file.isProcessing;
+        const classes = classNames({
+            'hds-uploader-file': true,
+            'error': !!file.error,
+            'ready': isFileReady,
+        });
+
+        return (
+            <div className={classes} key={file.name}>
+                <div className='hds-uploader-file-content'>
+                    <div className={'hds-uploader-file-icon'}>
+                        <Icon icon={Attach} />
+                    </div>
+                    <div className={'hds-uploader-file-data'}>
+                        <div className={'hds-uploader-file-name'}>{file.name}
+                            <span className={'hds-uploader-file-size'}>({(file.size / 1024 / 1024).toFixed(2)} MB)</span>
+                        </div>
+                        {file.uploadPercent < 100 && (
+                            <LinearProgressBar
+                                className="progress-bar"
+                                indicateProgress
+                                value={file.uploadPercent}
+                                size={LinearProgressBar.sizes.LARGE}
+                            />
+                        )}
+                        {file.isProcessing && (
+                            <div className={'hds-uploader-file-processing'}>
+                                File is being processed...
+                            </div>
+                        )}
+                        {isFileReady && !!onDelete && (
+                            <div className={'hds-uploader-file-actions'}>
+                                <Button
+                                    kind={Button.kinds.TERTIARY}
+                                    size={Button.sizes.SMALL}
+                                    onClick={() => onDeleteClick(file)}
+                                    leftIcon={Delete}
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+                {file.error && (
+                    <div className={'hds-uploader-file-error-message'}>
+                        {file.error.message}
+                    </div>
+                )}
+            </div>
+        );
+    }), [files, onDelete, onDeleteClick]);
+
+    return (
+        <div className={classes} id={id} data-testid={testId}>
+            <div
+                className={'hds-uploader-base'}
+                onDragEnter={onDragTypeEvent}
+                onDragLeave={onDragTypeEvent}
+                onDragOver={onDragTypeEvent}
+                onDrop={onDrop}
+                onClick={onUploadClick}
+            >
+                <input type={'file'} className={'hds-uploader-file-input'} ref={fileInputRef} onChange={onFileInputChange} />
+                <div className={'hds-uploader-base-icon'}>
+                    <Icon icon={Upload} />
+                </div>
+                <div className={'hds-uploader-base-text'}>
+                    <div className='instruction'>
+                        Click to select a file<br />
+                        or drag and drop
+                    </div>
+                    {fileTypeHint && (
+                        <div className='file-types-hint'>{fileTypeHint}</div>
+                    )}
+                </div>
+            </div>
+            {renderedFiles.length > 0 && <hr />}
+            {renderedFiles}
+        </div>
+    );
+}
+
+export const BasicUploader = Uploader<void>;

package/src/components/Uploader/__stories__/Uploader.mdx

@@ -0,0 +1,30 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import {BasicUploader} from "../Uploader";
+import { Default, Overview } from "./Uploader.stories";
+import * as UploaderStories from "./Uploader.stories";
+
+<Meta title="Inputs/Uploader" of={UploaderStories} />
+
+# Uploader
+
+Uploader components allow users to drop a file to upload.
+
+- [Overview](#overview)
+- [Usage](#usage)
+- [Props](#props)
+
+## Overview
+
+An file upload field includes a label and a drop zone. They typically appear in forms and dialogs.
+
+<Canvas of={Overview} />
+
+## Usage
+
+```jsx
+<Uploader<Result> uploadFunction={async (file): Result => await api.upload(file)} />
+```
+
+## Props
+
+<PropsTable />

package/src/components/Uploader/__stories__/Uploader.stories.tsx

@@ -0,0 +1,51 @@
+import { createComponentTemplate } from "@heliux-org/storybook-components";
+import { Uploader, BasicUploader } from "../Uploader";
+import React from "react";
+
+
+export default {
+  title: "Inputs/Uploader",
+  component: BasicUploader,
+};
+
+const UploaderTemplate = createComponentTemplate(BasicUploader as any);
+
+export const Overview = {
+  render: UploaderTemplate.bind({}),
+  name: "Overview",
+  args: {
+    uploadFunction: async () => { },
+    onDelete: async () => true,
+    initialFiles: [{
+      name: "file1.png",
+      size: 1000,
+    }, {
+      name: "file2.png",
+      size: 2000,
+      error: new Error('upload failed'),
+    },{
+      name: "file3.png",
+      size: 2000,
+    }]
+  }
+};
+
+export const Default = {
+  render: () => {
+    return (
+      <Uploader<void> uploadFunction={async () => { }} onDelete={async (f) => true} />
+    );
+  },
+};
+
+export const UploadFailure = {
+  name: "Upload Failure",
+  render: () => {
+    return (
+      <Uploader<void>
+        uploadFunction={async () => { throw new Error('something happened') }}
+        onDelete={async (f) => true}
+      />
+    );
+  },
+};

package/src/components/Uploader/index.ts

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

package/src/components/index.ts

@@ -154,3 +154,4 @@ export { default as Workflow } from "./Workflow/Workflow";
 export { Step } from "./Workflow/Workflow";
 export { ButtonType } from "./Button/ButtonConstants";
 export { default as NumericField } from "./NumericField/NumericField";
+export { Uploader, BasicUploader } from "./Uploader/Uploader";