@geneui/components 3.0.0-next-d9fa1ce-06112024 → 3.0.0-next-f0c40b8-25112024

package/HelperText.js

@@ -46,14 +46,14 @@ var SvgWarningFill = function SvgWarningFill(_ref) {
 var css_248z = ".helperText{display:inline-flex;gap:var(--guit-ref-spacing-3xsmall);max-width:100%}.helperText_size_medium .helperText__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.helperText_size_small .helperText__text{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.helperText_type_rest{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_danger{color:var(--guit-sem-color-foreground-error)}.helperText_type_warning{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_warning .helperText__icon{color:var(--guit-sem-color-foreground-warning)}.helperText_disabled,.helperText_disabled .helperText__icon{color:var(--guit-sem-color-foreground-disabled)}.helperText__icon{flex:0 0 auto}";
 styleInject(css_248z);
 
+const iconSize = {
+    small: 16,
+    medium: 20
+};
 /**
  * The Helper Text provides users with additional information or guidance related to a specific input field in a form. This text helps users understand the expected format, requirements, or purpose of the input, thereby improving form completion accuracy and user confidence.
  */
 const HelperText = ({ size = "medium", type = "rest", text, Icon, isDisabled, isLoading, className }) => {
-    const iconSize = {
-        small: 16,
-        medium: 20
-    };
     const iconMap = {
         danger: React__default.createElement(SvgErrorAlertFill, { size: iconSize[size] }),
         warning: React__default.createElement(SvgWarningFill, { size: iconSize[size] }),

package/ProgressBar.js

@@ -0,0 +1,67 @@
+import React__default, { useState, useMemo, useEffect } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import HelperText from './HelperText.js';
+import Label from './Label.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './ArrowLeft-b88e2ba8.js';
+import './Tooltip.js';
+import 'react-dom';
+import './GeneUIProvider.js';
+import './useEllipsisDetection-46d712b6.js';
+import './Info.js';
+
+var css_248z = ".progressBar{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall);min-width:24rem;width:100%}.progressBar_type_determinate .progressBar__loadingBar,.progressBar_type_indeterminate .progressBar__fill{display:none}.progressBar_type_indeterminate .progressBar__loadingBar{animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:var(--guit-ref-motion-easing-standard);will-change:transform}[dir=ltr] .progressBar_type_indeterminate .progressBar__loadingBar{animation-name:progress-bar-loading-from-left}[dir=rtl] .progressBar_type_indeterminate .progressBar__loadingBar{animation-name:progress-bar-loading-from-right}.progressBar_size_large .progressBar__status,.progressBar_size_medium .progressBar__status{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.progressBar_size_large .progressBar__track{border-radius:var(--guit-ref-radius-xsmall);height:var(--guit-sem-dimension-height-xsmall)}.progressBar_size_medium .progressBar__track{border-radius:var(--guit-ref-radius-2xsmall);height:var(--guit-sem-dimension-height-2xsmall)}.progressBar_size_small .progressBar__track{border-radius:var(--guit-ref-radius-3xsmall);height:var(--guit-sem-dimension-height-3xsmall)}.progressBar_size_small .progressBar__status{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.progressBar_color_default .progressBar__fill,.progressBar_color_default .progressBar__loadingBar{background-color:var(--guit-sem-color-background-brand-2)}.progressBar_color_success .progressBar__fill,.progressBar_color_success .progressBar__loadingBar{background-color:var(--guit-sem-color-background-success-2)}.progressBar_color_error .progressBar__fill,.progressBar_color_error .progressBar__loadingBar{background-color:var(--guit-sem-color-background-error-2)}.progressBar__track{background-color:var(--guit-sem-color-background-neutral-2);overflow:hidden;width:100%}.progressBar__fill,.progressBar__loadingBar{border-radius:inherit;height:100%}.progressBar__loadingBar{width:50%}.progressBar__info{align-items:flex-start;display:flex;gap:var(--guit-ref-spacing-xsmall);justify-content:space-between;width:100%}.progressBar__helperText{word-break:break-word}.progressBar__status{color:var(--guit-sem-color-foreground-neutral-2);display:inline-flex;flex:0 0 auto;gap:.4rem;margin-inline-start:auto}.progressBar__uploadingText{display:inline-block}@keyframes progress-bar-loading-from-left{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(200%,0,0)}}@keyframes progress-bar-loading-from-right{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-200%,0,0)}}";
+styleInject(css_248z);
+
+const helperTextTypeMap = {
+    default: "rest",
+    success: "rest",
+    error: "danger"
+};
+const helperTextAndLabelSizeMap = {
+    large: "medium",
+    medium: "medium",
+    small: "small"
+};
+/**
+ * A progress bar offers visual feedback on the status and duration of a process, such as a download, file transfer, or installation, helping users understand how much longer they need to wait.
+ */
+const ProgressBar = ({ className, size = "medium", type = "determinate", error, helperText, percent, uploadingText, infoText, label }) => {
+    const [status, setStatus] = useState("default");
+    const isDeterminate = type === "determinate";
+    const isTypeDefault = status === "default";
+    const isPercentLowerThanMax = percent !== undefined && percent < 100;
+    const processedPercent = useMemo(() => {
+        let result = percent || 0;
+        if (result < 0 && !error)
+            result = 0;
+        if (result >= 100 || error)
+            result = 100;
+        return `${result}%`;
+    }, [percent, error]);
+    useEffect(() => {
+        if (error && status !== "error") {
+            setStatus("error");
+        }
+        else if (percent !== undefined && !error) {
+            if (percent >= 100 && status !== "success" && isDeterminate) {
+                setStatus("success");
+            }
+            else if ((!isTypeDefault && isPercentLowerThanMax && isDeterminate) || !isDeterminate) {
+                setStatus("default");
+            }
+        }
+    }, [error, isTypeDefault, status, percent, isDeterminate]);
+    return (React__default.createElement("div", { className: classNames(`progressBar progressBar_type_${error ? "determinate" : type} progressBar_size_${size} progressBar_color_${status}`, className) },
+        React__default.createElement(Label, { labelText: label, size: helperTextAndLabelSizeMap[size], infoText: infoText }),
+        React__default.createElement("div", { className: "progressBar__track" },
+            (isDeterminate || error) && React__default.createElement("div", { className: "progressBar__fill", style: { width: processedPercent } }),
+            React__default.createElement("div", { className: "progressBar__loadingBar" })),
+        React__default.createElement("div", { className: "progressBar__info" },
+            helperText && (React__default.createElement(HelperText, { text: helperText, size: helperTextAndLabelSizeMap[size], type: helperTextTypeMap[status], className: "progressBar__helperText" })),
+            isDeterminate && isTypeDefault && isPercentLowerThanMax && (React__default.createElement("p", { className: "progressBar__status" },
+                React__default.createElement("span", { className: "progressBar__uploadingText" }, uploadingText),
+                React__default.createElement("span", { className: "progressBar__percent" }, processedPercent))))));
+};
+
+export { ProgressBar as default };

package/components/atoms/Label/Label.d.ts

@@ -10,7 +10,7 @@ interface ILabelProps {
      * The text content of the `label`.
      * This is the main text displayed within the `label`.
      */
-    labelText: string;
+    labelText?: string;
     /**
      * Indicates whether the label represents a required field.
      * When set to `true`, a visual indicator (asterisk) will be added to denote that the field is required.

package/components/molecules/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,52 @@
+import { FC } from "react";
+import "./ProgressBar.scss";
+interface IProgressBarProps {
+    /**
+     * Specifies the progress percentage displayed by the progress bar.<br>
+     * Valid values are between `0` and `100`. Values less than `0` will fallback to `0`,
+     * and values greater than `100` will fallback to `100`.<br>
+     * In case of value is `100` or greater the style of the component will be changed to success.
+     */
+    percent?: number;
+    /**
+     * Text displayed alongside the progress percentage.
+     */
+    uploadingText?: string;
+    /**
+     * Defines the size of the progress bar.<br>
+     * Possible values: `large | medium | small`
+     */
+    size?: "large" | "medium" | "small";
+    /**
+     * Sets the behavior of the bar for measurable or ongoing processes.<br>
+     * Possible values: `determinate | indeterminate`
+     */
+    type?: "determinate" | "indeterminate";
+    /**
+     * Indicates an error state for the progress bar.<br>
+     *  When `true`, the progress bar appears in the error style.
+     */
+    error?: boolean;
+    /**
+     *  Adds supplementary information below the progress bar.
+     */
+    helperText?: string;
+    /**
+     *  Additional descriptive text shown with info icon and tooltip alongside of the label component.
+     */
+    infoText?: string;
+    /**
+     *  The main label text describing the progress bar's purpose.
+     */
+    label?: string;
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+}
+/**
+ * A progress bar offers visual feedback on the status and duration of a process, such as a download, file transfer, or installation, helping users understand how much longer they need to wait.
+ */
+declare const ProgressBar: FC<IProgressBarProps>;
+export { IProgressBarProps, ProgressBar as default };

package/components/molecules/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export { IProgressBarProps, default } from "./ProgressBar";

package/index.d.ts

@@ -7,6 +7,7 @@ export { default as Divider, IDividerProps } from "./components/atoms/Divider";
 export { default as Info, IInfoProps } from "./components/atoms/Info";
 export { default as Button, IButtonProps } from "./components/atoms/Button";
 export { default as Tooltip } from "./components/molecules/Tooltip";
+export { default as ProgressBar } from "./components/molecules/ProgressBar";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";
 export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";

package/index.js

@@ -7,6 +7,7 @@ export { default as Divider } from './Divider.js';
 export { default as Info } from './Info.js';
 export { default as Button } from './Button.js';
 export { default as Tooltip } from './Tooltip.js';
+export { default as ProgressBar } from './ProgressBar.js';
 export { GeneUIDesignSystemContext, default as GeneUIProvider } from './GeneUIProvider.js';
 export { u as useDebounce, a as useEllipsisDetection } from './useEllipsisDetection-46d712b6.js';
 import 'react';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-d9fa1ce-06112024",
+    "version": "3.0.0-next-f0c40b8-25112024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {