ekm-ui 0.3.24 → 0.3.26

package/dist/stacked-list-item.mjs

@@ -1,23 +1,24 @@
-export { a as StackedListItem } from './chunk-3LWR4ASZ.mjs';
+export { a as StackedListItem } from './chunk-KJPNVM7M.mjs';
 import './chunk-EHJJX6ZZ.mjs';
 import './chunk-YFGQ3B3L.mjs';
-import './chunk-LNK7V5RH.mjs';
+import './chunk-45QX7OUO.mjs';
 import './chunk-QWPN2UNV.mjs';
 import './chunk-ASCPOK5F.mjs';
+import './chunk-25FJ277C.mjs';
 import './chunk-FAFXVD4P.mjs';
-import './chunk-ONI5FUPW.mjs';
+import './chunk-HSVMUHWO.mjs';
+import './chunk-XFCPRHEY.mjs';
 import './chunk-A6OC3NNV.mjs';
 import './chunk-256SAVHD.mjs';
 import './chunk-VPLCWU7T.mjs';
 import './chunk-PPMW7YAZ.mjs';
-import './chunk-XFCPRHEY.mjs';
+import './chunk-5CGIKL2Y.mjs';
 import './chunk-NTGEZMHP.mjs';
 import './chunk-E7S3XFB4.mjs';
 import './chunk-RMX72FR3.mjs';
 import './chunk-2IL2LP47.mjs';
 import './chunk-KBXHNBM5.mjs';
 import './chunk-EPWIDK35.mjs';
-import './chunk-25FJ277C.mjs';
 import './chunk-BIU2AAPZ.mjs';
 import './chunk-D6H235SZ.mjs';
 import './chunk-S4LI5APF.mjs';

package/dist/table-header/table-header.mjs

@@ -1,4 +1,4 @@
-export { a as TableHeader } from '../chunk-LNK7V5RH.mjs';
+export { a as TableHeader } from '../chunk-45QX7OUO.mjs';
 import '../chunk-PUJZGK7Y.mjs';
 import '../chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "sideEffects": [
     "**/*.css"
   ],

package/src/index.tsx

@@ -47,5 +47,6 @@ export { TextInput } from "./textinput";
 export { FilePicker } from "./file-picker/file-picker";
 export { ToggleSwitch } from "./toggleswitch";
 export { Card } from "./card";
+export { ProgressBar } from "./progress-bar";
 
 import "./styles.css";

package/src/progress-bar.tsx

@@ -0,0 +1,37 @@
+//@ts-nocheck
+import PropTypes from 'prop-types'
+
+const colors = Object.freeze({
+  primary: 'bg-blue-600 dark:bg-blue-500',
+  secondary: 'bg-gray-600 dark:bg-gray-500',
+  success: 'bg-green-600 dark:bg-green-500',
+  danger: 'bg-red-600 dark:bg-red-500',
+  warning: 'bg-yellow-600 dark:bg-yellow-500',
+  info: 'bg-blue-600 dark:bg-blue-500',
+  light: 'bg-gray-100 dark:bg-gray-900',
+  dark: 'bg-gray-800 dark:bg-gray-200',
+})
+
+const sizes = Object.freeze({
+  sm: 'h-1.5 mb-4',
+  md: 'h-2.5 mb-4',
+  lg: 'h-4 mb-4',
+  xl: 'h-6',
+})
+
+export function ProgressBar({ progress, size = 'md', color='primary'}) {
+  return (
+    <div className={`w-full bg-gray-200 rounded-full ${sizes[size]} mb-4 dark:bg-gray-700`}>
+      <div className={`${sizes[size]} rounded-full ${colors[color]}`} style={{ width: `${progress}%` }}></div>
+    </div>
+  )
+}
+
+ProgressBar.propTypes = {
+  /** Current progress to be shown (defaults to 0) */
+    progress: PropTypes.number.isRequired,
+   /** Size of the progress bar (defaults to md) */
+    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+    /** Color of the progress bar (defaults to primary) */
+  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']),
+}

package/src/table-header/table-header.tsx

@@ -1,137 +1,151 @@
 //@ts-nocheck
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-import PropTypes from 'prop-types'
-import { Checkbox, Label, Tooltip } from 'flowbite-react'
-import _, { isEqual } from 'lodash'
-import { HiOutlineChevronUp, HiOutlineChevronDown, HiExclamationCircle } from 'react-icons/hi'
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import PropTypes from "prop-types";
+import { Checkbox, Label, Tooltip } from "flowbite-react";
+import _, { isEqual } from "lodash";
+import {
+  HiOutlineChevronUp,
+  HiOutlineChevronDown,
+  HiExclamationCircle,
+} from "react-icons/hi";
 
 function useDebounceEffect(effect, delay, deps) {
-  const renderRef = useRef(0)
-  const handlerRef = useRef(null)
-  const callback = useCallback(effect, deps)
+  const renderRef = useRef(0);
+  const handlerRef = useRef(null);
+  const callback = useCallback(effect, deps);
 
   useEffect(() => {
     if (renderRef.current !== 1) {
-      renderRef.current += 1 // Ignore running on first render
+      renderRef.current += 1; // Ignore running on first render
     } else {
       handlerRef.current = setTimeout(() => {
-        callback()
-      }, delay)
+        callback();
+      }, delay);
     }
     return () => {
-      clearTimeout(handlerRef.current)
-    }
-  }, [callback, delay])
+      clearTimeout(handlerRef.current);
+    };
+  }, [callback, delay]);
 }
 // This is used to perform deep object comparisson instead
 // of using the useEffect method.
 function useDeepEffect(effectFunc, deps) {
-  const isFirst = useRef(true)
-  const prevDeps = useRef(deps)
+  const isFirst = useRef(true);
+  const prevDeps = useRef(deps);
 
   useEffect(() => {
-    const isSame = prevDeps.current.every((obj, index) => isEqual(obj, deps[index]))
-    if (isFirst.current || !isSame) effectFunc()
-    isFirst.current = false
-    prevDeps.current = deps
-  }, deps)
+    const isSame = prevDeps.current.every((obj, index) =>
+      isEqual(obj, deps[index])
+    );
+    if (isFirst.current || !isSame) effectFunc();
+    isFirst.current = false;
+    prevDeps.current = deps;
+  }, deps);
 }
 
 // This is used to represent a single header and should be
 // used only with the Table header.
 function TableHeaderItem({ ...props }) {
-  const HeaderSortModes = { ASC: 'ASC', DSC: 'DSC', OFF: 'OFF' }
-  const [sort, setSort] = useState(HeaderSortModes.OFF)
-  const [hitCount, setHitCount] = useState(0) // required for debounce
+  const HeaderSortModes = { ASC: "ASC", DSC: "DSC", OFF: "OFF" };
+  const [sort, setSort] = useState(HeaderSortModes.OFF);
+  const [hitCount, setHitCount] = useState(0); // required for debounce
 
-  const { title, layout, sortable, override, callback, tooltip } = props
+  const { title, layout, sortable, override, callback, tooltip } = props;
 
   const cycleSortMode = () => {
-    if (!sortable) return
-    let newSort = sort
+    if (!sortable) return;
+    let newSort = sort;
     switch (sort) {
       case HeaderSortModes.OFF:
-        newSort = HeaderSortModes.DSC
-        break
+        newSort = HeaderSortModes.DSC;
+        break;
       case HeaderSortModes.ASC:
-        newSort = HeaderSortModes.OFF
-        break
+        newSort = HeaderSortModes.OFF;
+        break;
       case HeaderSortModes.DSC:
-        newSort = HeaderSortModes.ASC
-        break
+        newSort = HeaderSortModes.ASC;
+        break;
       default:
-        break
+        break;
     }
     // Only update if mode changes.
     if (newSort !== sort) {
-      setSort(newSort)
-      callback({ title, sort: newSort })
+      setSort(newSort);
+      callback({ title, sort: newSort });
     }
-  }
+  };
 
   useDebounceEffect(
     () => {
       // Prevents triggering on first render
-      if (hitCount > 0) cycleSortMode()
+      if (hitCount > 0) cycleSortMode();
     },
     500,
-    [hitCount],
-  )
+    [hitCount]
+  );
 
   // This is used to force a sort state on the header via props.
   useDeepEffect(() => {
-    if (override == null) return
+    if (override == null) return;
 
     if (title !== override.title) {
       if (sort !== HeaderSortModes.OFF) {
-        setSort(HeaderSortModes.OFF)
+        setSort(HeaderSortModes.OFF);
       }
-      return
+      return;
     }
     if (title === override.title && sort !== override.sort) {
-      if (Object.values(HeaderSortModes).indexOf(override.sort) === -1) return
-      let newSort = override.sort
+      if (Object.values(HeaderSortModes).indexOf(override.sort) === -1) return;
+      let newSort = override.sort;
       switch (override.sort) {
         case HeaderSortModes.OFF:
-          newSort = HeaderSortModes.OFF
-          break
+          newSort = HeaderSortModes.OFF;
+          break;
         case HeaderSortModes.ASC:
-          newSort = HeaderSortModes.ASC
-          break
+          newSort = HeaderSortModes.ASC;
+          break;
         case HeaderSortModes.DSC:
-          newSort = HeaderSortModes.DSC
-          break
+          newSort = HeaderSortModes.DSC;
+          break;
         default:
-          break
+          break;
       }
       // Only update if mode changes.
       if (newSort !== sort) {
-        setSort(newSort)
+        setSort(newSort);
       }
     }
-  }, [override])
+  }, [override]);
 
   const renderCheveron = () => {
     return sort === HeaderSortModes.ASC ? (
       <HiOutlineChevronUp className="float-right ml-2 " fontSize="20px" />
     ) : (
       <HiOutlineChevronDown className="float-right ml-2 " fontSize="20px" />
-    )
-  }
+    );
+  };
 
   return (
-    <div className={`${layout} ${sortable ? 'cursor-pointer' : ''} ${tooltip != null ? ' d-flex align-items-center float-left' : ''} `}>
+    <div
+      className={`${layout} ${sortable ? "cursor-pointer" : ""} ${
+        tooltip != null ? " d-flex align-items-center float-left" : ""
+      } `}
+    >
       <span onClick={() => setHitCount(hitCount + 1)}>{title}</span>
       {sortable && sort !== HeaderSortModes.OFF && renderCheveron()}
       {tooltip != null && (
         <div className="float-right ml-2">
-          <Tooltip key={`tooltipName-${title}`} placement="bottom" content={tooltip}>
+          <Tooltip
+            key={`tooltipName-${title}`}
+            placement="bottom"
+            content={tooltip}
+          >
             <HiExclamationCircle fontSize="20px" color="#555555" />
           </Tooltip>
         </div>
       )}
     </div>
-  )
+  );
 }
 
 TableHeaderItem.propTypes = {
@@ -144,61 +158,73 @@ TableHeaderItem.propTypes = {
   }),
   callback: PropTypes.func,
   tooltip: PropTypes.string,
-}
+};
 
 TableHeaderItem.defaultProps = {
-  layout: 'col-2 font-weight-bold',
+  layout: "col-2 font-weight-bold",
   sortable: false,
   override: null,
   tooltip: null,
-}
+};
 
 export function TableHeader({
   config,
   callback,
   forceCheckedState = false,
   checkboxCallback,
-  layout = 'form-row tableHeader--custom align-items-center d-none d-lg-flex',
+  layout = "form-row tableHeader--custom align-items-center d-none d-lg-flex",
   forceSort,
   selected = 0,
   actions,
 }) {
-  const HeaderSortModes = { ASC: 'ASC', DSC: 'DSC', OFF: 'OFF' }
-  const [changeSortTo, setChangeSortTo] = useState(null)
-  const [checked, setChecked] = useState(forceCheckedState)
+  const HeaderSortModes = { ASC: "ASC", DSC: "DSC", OFF: "OFF" };
+  const [changeSortTo, setChangeSortTo] = useState(null);
+  const [checked, setChecked] = useState(forceCheckedState);
 
   const handleHeaderSort = (sortBy) => {
-    setChangeSortTo(sortBy)
-    callback(sortBy)
-  }
+    setChangeSortTo(sortBy);
+    callback(sortBy);
+  };
 
   const handleHeaderCheckbox = () => {
-    let status = !checked
-    setChecked(status)
-    checkboxCallback(status)
-  }
+    let status = !checked;
+    setChecked(status);
+    checkboxCallback(status);
+  };
 
   useDeepEffect(() => {
-    if (forceSort == null) return
-    if (forceSort.title == null || forceSort.sort == null) return
+    if (forceSort == null) return;
+    if (forceSort.title == null || forceSort.sort == null) return;
 
     if (Object.values(HeaderSortModes).indexOf(forceSort.sort) !== -1) {
-      setChangeSortTo({ title: forceSort.title, sort: forceSort.sort })
+      setChangeSortTo({ title: forceSort.title, sort: forceSort.sort });
     }
-  }, [forceSort])
+  }, [forceSort]);
 
   useEffect(() => {
-    setChecked(forceCheckedState)
-  }, [forceCheckedState])
+    setChecked(forceCheckedState);
+  }, [forceCheckedState]);
 
   return (
     <div className={layout}>
       {config.checkbox && (
-        <div className="col-1 font-weight-bold">
-          <Checkbox id="checkAll" className="custom-control-input " checked={checked} onChange={() => {}} />
+        <div className={`col-1 font-weight-bold ${config.checkboxLayout}`}>
+          <Checkbox
+            id="checkAll"
+            className="custom-control-input "
+            checked={checked}
+            onChange={() => {}}
+          />
           <div className="-mt-1.5">
-            <Label className="-mt-1.5" htmlFor="checkAll" style={{ fontSize: '14px', fontWeight: '700 !important' }} onClick={handleHeaderCheckbox}>
-              {!config.hideSelectedNum && (checked || selected > 0) ? `${selected} Selected` : ''}
+            <Label
+              className="-mt-1.5"
+              htmlFor="checkAll"
+              style={{ fontSize: "14px", fontWeight: "700 !important" }}
+              onClick={handleHeaderCheckbox}
+            >
+              {!config.hideSelectedNum && (checked || selected > 0)
+                ? `${selected} Selected`
+                : ""}
             </Label>
           </div>
         </div>
@@ -217,10 +243,10 @@ export function TableHeader({
                 callback={handleHeaderSort}
                 tooltip={val.tooltip}
               />
-            )
+            );
           })}
     </div>
-  )
+  );
 }
 
 TableHeader.propTypes = {
@@ -234,7 +260,7 @@ TableHeader.propTypes = {
         layout: PropTypes.string,
         sortable: PropTypes.bool,
         tooltip: PropTypes.string,
-      }),
+      })
     ).isRequired,
   }).isRequired,
   /** Optional setting the checkbox*/
@@ -258,4 +284,4 @@ TableHeader.propTypes = {
   callback: PropTypes.func.isRequired,
   /** Optional return call triggered when the optional header checkbox is clicked */
   checkboxCallback: PropTypes.func,
-}
+};