dce-reactkit 4.2.4-beta-timestamp.2 → 4.2.6

package/src/components/ProgressBar.tsx

@@ -0,0 +1,347 @@
+/**
+ * Customizable Progress Bar component using Bootstrap styles
+ * @author Allison Zhang
+ */
+
+// Import React
+import React from 'react';
+
+// Import types
+import Variant from '../types/Variant';
+import ProgressBarSize from '../types/ProgressBarSize';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = (
+  & (
+    // Percent
+    | {
+      // Percentage progress (0-100)
+      percentProgress: number,
+      // Num decimal places to show (default 0)
+      numDecimalPlaces?: number,
+    }
+    // Items
+    | {
+      // Current progress (number of items completed)
+      numComplete: number,
+      // Maximum progress (total number of items)
+      total: number,
+    }
+  )
+  & {
+    // Whether to show striped effect (default false)
+    striped?: boolean,
+    // Variant of the progress bar (default warning)
+    variant?: Variant,
+    // Background variants (default secondary subtle)
+    bgVariant?: Variant,
+    // Hide outline (default false)
+    showOutline?: boolean,
+    // Size of the progress bar (default md)
+    size?: ProgressBarSize,
+  }
+);
+
+// Progress status definition
+type ProgressStatus = (
+  | {
+    // usePercent true
+    usePercent: true,
+    // Percentage progress (0-100)
+    percentProgress: number,
+    // Num decimal places to show (default 0)
+    numDecimalPlaces?: number,
+  }
+  // Items
+  | {
+    // usePercent false
+    usePercent: false,
+    // Current progress (number of items completed)
+    numComplete: number,
+    // Maximum progress (total number of items)
+    total: number,
+  }
+);
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Constants ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Multiplier for calculating width of number of items
+const ITEM_WIDTH_MULTIPLIER = 1.3;
+
+// Constant for percent width
+const PERCENT_WIDTH = 3;
+
+// Constant for item width
+const ITEM_WIDTH = 2;
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Style ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Base styles
+let style = `
+  .ProgressBar-number-of,
+  .ProgressBar-percent {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    padding-right: 0.5em;
+    padding-left: 0.25em;
+    text-align: right;
+    transition: width .25s ease;
+  }
+
+  .ProgressBar-background {
+    overflow: hidden;
+  }
+
+  .ProgressBar-bar {
+    transition: width 1s ease;
+    overflow: hidden;
+  }
+`;
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const ProgressBar: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure props
+  const {
+    striped,
+    variant = Variant.Warning,
+    bgVariant = Variant.Secondary,
+    showOutline,
+    size = ProgressBarSize.Medium,
+  } = props;
+
+  /* -------------- Status ------------- */
+
+  // Determine progress status
+  let status: ProgressStatus;
+
+  // Check whether to use percent or items
+  if ('percentProgress' in props) {
+    // Percent
+    const {
+      percentProgress,
+      numDecimalPlaces,
+    } = props;
+    status = {
+      usePercent: true,
+      percentProgress,
+      numDecimalPlaces,
+    };
+  } else {
+    // Items
+    const {
+      numComplete,
+      total,
+    } = props;
+    status = {
+      usePercent: false,
+      numComplete,
+      total,
+    };
+  }
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /* ---------------- Sizes --------------- */
+  /*----------------------------------------*/
+
+  // Size styles
+  switch (size) {
+    case ProgressBarSize.Small:
+      // Small size
+      style += `
+        .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
+          font-size: 1em;
+        }
+        .ProgressBar-container .ProgressBar-background {
+          height: 1.5em;
+          border-radius: 0.5em;
+        }
+        .ProgressBar-container .ProgressBar-bar {
+          height: 1.5em;
+          border-radius: 0.5em;
+        }
+        .ProgressBar-percent {
+          min-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
+          max-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
+        }
+        .ProgressBar-number-of {
+          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
+          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
+        }
+      `;
+      break;
+    case ProgressBarSize.Medium:
+      // Medium size
+      style += `
+        .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
+          font-size: 1.5em;
+        }
+        .ProgressBar-container .ProgressBar-background {
+          height: 2em;
+          border-radius: 0.7em;
+        }
+        .ProgressBar-container .ProgressBar-bar {
+          height: 2em;
+          border-radius: 0.7em;
+        }
+        .ProgressBar-percent {
+          min-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
+          max-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
+        }
+        .ProgressBar-number-of {
+          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
+          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
+        }
+      `;
+      break;
+    case ProgressBarSize.Large:
+      // Large size
+      style += `
+        .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
+          font-size: 2em;
+        }
+        .ProgressBar-container .ProgressBar-background {
+          height: 3em;
+          border-radius: 1em;
+        }
+        .ProgressBar-container .ProgressBar-bar {
+          height: 3em;
+          border-radius: 1em;
+        }
+        .ProgressBar-percent {
+          min-width:  ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
+          max-width:  ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
+        }
+        .ProgressBar-number-of {
+          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
+          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
+        }
+      `;
+      break;
+    default:
+      break;
+  }
+
+  // Get the width of the outline based on size
+  const outlineWidth = (() => {
+    switch (size) {
+      case ProgressBarSize.Small: return '0.05em';
+      case ProgressBarSize.Medium: return '0.08em';
+      case ProgressBarSize.Large: return '0.1em';
+      default: return '0.05em';
+    }
+  })();
+
+  /*----------------------------------------*/
+  /* --------------- Stripes -------------- */
+  /*----------------------------------------*/
+
+  // Stripes style
+  const stripesStyle = `
+    .ProgressBar-stripes {
+      background-image: linear-gradient(315deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%, #000000 100%);
+      background-size: 6em 6em;
+      animation: ProgressBar-stripe-animation 2.5s linear infinite;
+      opacity: 0.09;
+    }
+    @keyframes ProgressBar-stripe-animation {
+      0% {
+        background-position: -6em 0;
+      }
+      100% {
+        background-position: 0 0;
+      }
+    }
+  `;
+
+  // Stripes for striped effect
+  const stripes: React.ReactNode = (
+    <div>
+      <style>{stripesStyle}</style>
+      <div
+        className="ProgressBar-stripes position-absolute "
+        style={{
+          width: '200%',
+          height: '100%',
+        }}
+      >
+        &nbsp;
+      </div>
+    </div>
+  );
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  // Render the progress bar
+  return (
+    <div className="ProgressBar-container d-flex align-items-center">
+      {/* Style */}
+      <style>{style}</style>
+      {/* Use items */}
+      {!status.usePercent && status.numComplete && (
+        <span
+          className="ProgressBar-number-of pe-2 align-self-center"
+        >
+          {status.numComplete}
+          &nbsp;of&nbsp;
+          {status.total}
+        </span>
+      )}
+      {/* Use percentage */}
+      {status.usePercent && status.percentProgress && (
+        <span
+          className="ProgressBar-percent pe-2 align-self-center"
+        >
+          {status.percentProgress.toFixed(status?.numDecimalPlaces ?? 0)}
+          %
+        </span>
+      )}
+      <div
+        className={`ProgressBar-background bg-${bgVariant} w-100`}
+        style={{
+          boxShadow: `0 0 0 ${outlineWidth} ${showOutline ? '#000' : '#DEE2E6'}`,
+        }}
+        aria-valuenow={status.usePercent ? status.percentProgress : status.numComplete}
+        aria-valuemin={0}
+        aria-valuemax={status.usePercent ? 100 : status.total}
+      >
+        <div
+          className={
+            `ProgressBar-bar bg-${variant} text-start position-relative`
+          }
+          style={{
+            width: `${(status.usePercent ? status.percentProgress : (status.numComplete / status.total) * 100)}%`,
+            overflow: 'hidden',
+          }}
+        >
+          {striped && stripes}
+          &nbsp;
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/helpers/getTimestampFromTimeInfoInET.ts

@@ -36,67 +36,21 @@ const getTimestampFromTimeInfoInET = (
     minute,
   } = opts;
 
+  // Determine if the date is in DST in Eastern Time
+  const tempDate = new Date(year, month - 1, day);
+  const janOffset = new Date(year, 0, 1).getTimezoneOffset();
+  const isDST = tempDate.getTimezoneOffset() < janOffset;
+  const etOffset = isDST ? '-04:00' : '-05:00';
+
   // Format with leading zeroes
   const mm = padZerosLeft(month, 2);
   const dd = padZerosLeft(day, 2);
   const hh = padZerosLeft(hour, 2);
   const min = padZerosLeft(minute, 2);
 
-  // Use Intl.DateTimeFormat to get the ET offset and ET components
-  const dateForET = new Date(Date.UTC(year, month - 1, day, hour, minute, 0));
-  const options: Intl.DateTimeFormatOptions = {
-    timeZone: 'America/New_York',
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    hour12: false,
-    timeZoneName: 'shortOffset',
-  };
-  const parts: Intl.DateTimeFormatPart[] = new Intl.DateTimeFormat('en-US', options).formatToParts(dateForET);
-  const etYear: string | undefined = parts.find((p: Intl.DateTimeFormatPart) => {
-    return p.type === 'year';
-  })?.value;
-  const etMonth: string | undefined = parts.find((p: Intl.DateTimeFormatPart) => {
-    return p.type === 'month';
-  })?.value;
-  const etDay: string | undefined = parts.find((p: Intl.DateTimeFormatPart) => {
-    return p.type === 'day';
-  })?.value;
-  const etHour: string | undefined = parts.find((p: Intl.DateTimeFormatPart) => {
-    return p.type === 'hour';
-  })?.value;
-  const etMinute: string | undefined = parts.find((p: Intl.DateTimeFormatPart) => {
-    return p.type === 'minute';
-  })?.value;
-  const etSecond: string | undefined = parts.find((p: Intl.DateTimeFormatPart) => {
-    return p.type === 'second';
-  })?.value;
-  const tzName: string | undefined = parts.find((p: Intl.DateTimeFormatPart) => {
-    return p.type === 'timeZoneName';
-  })?.value;
-
-  // Validate we got everything we need
-  if (!etYear || !etMonth || !etDay || !etHour || !etMinute || !etSecond || !tzName) {
-    throw new ErrorWithCode(
-      'Failed to parse date parts from Intl.DateTimeFormat',
-      ReactKitErrorCode.ETTimestampInvalid,
-    );
-  }
-
-  // Extract numeric offset from "GMT-4" or "UTC-5"
-  const offsetNum = Number(tzName.replace(/^(GMT|UTC)/, ''));
-  const sign = offsetNum >= 0 ? '+' : '-';
-  const offset = `${sign}${padZerosLeft(Math.abs(offsetNum), 2)}:00`;
-
-  // Build ISO string with offset
-  const etDateString = `${etYear}-${etMonth}-${etDay}T${etHour}:${etMinute}:${etSecond}${offset}`;
-
-  // Parse into ET timestamp
-  const etDate = new Date(etDateString);
-  const timestamp = etDate.getTime();
+  // Build ET ISO string and convert to UTC timestamp
+  const etISOString = `${year}-${mm}-${dd}T${hh}:${min}:00${etOffset}`;
+  const timestamp = (new Date(etISOString)).getTime();
 
   // Verify that the timestamp is correct
   const timeInfoInET = getTimeInfoInET(timestamp);
@@ -108,9 +62,7 @@ const getTimestampFromTimeInfoInET = (
     || timeInfoInET.minute !== minute
   ) {
     throw new ErrorWithCode(
-      `Timestamp mismatch: expected ${year}-${mm}-${dd} ${hh}:${min}, `
-      + `got ${timeInfoInET.year}-${padZerosLeft(timeInfoInET.month, 2)}-${padZerosLeft(timeInfoInET.day, 2)} `
-      + `${padZerosLeft(timeInfoInET.hour, 2)}:${padZerosLeft(timeInfoInET.minute, 2)}`,
+      `Timestamp mismatch: expected ${year}-${mm}-${dd} ${hh}:${min}, got ${timeInfoInET.year}-${padZerosLeft(timeInfoInET.month, 2)}-${padZerosLeft(timeInfoInET.day, 2)} ${padZerosLeft(timeInfoInET.hour, 2)}:${padZerosLeft(timeInfoInET.minute, 2)}`,
       ReactKitErrorCode.ETTimestampInvalid,
     );
   }

package/src/index.ts

@@ -31,6 +31,7 @@ import ToggleSwitch from './components/ToggleSwitch';
 import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
 import MultiSwitch from './components/MultiSwitch';
 import Dropdown from './components/Dropdown';
+import ProgressBar from './components/ProgressBar';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -156,6 +157,7 @@ export {
   AutoscrollToBottomContainer,
   MultiSwitch,
   Dropdown,
+  ProgressBar,
   // Global functions
   alert,
   prompt,

package/src/types/ProgressBarSize.ts

@@ -0,0 +1,11 @@
+/**
+ * Progress bar sizes
+ * @author Allison Zhang
+ */
+enum ProgressBarSize {
+  Small = 'Small',
+  Medium = 'Medium',
+  Large = 'Large',
+}
+
+export default ProgressBarSize;