dce-reactkit 3.0.0-beta.39 → 3.0.0-beta.41

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import React from 'react';
  * @author Gabe Abrams
  */
 
-declare type Props$6 = {
+declare type Props$7 = {
     children: React.ReactNode;
     sendRequest: SendRequestFunction;
     dark?: boolean;
@@ -52,7 +52,7 @@ declare const confirm: (title: string, text: string) => Promise<boolean>;
  * @param [errorTitle] title of the error box
  */
 declare const showFatalError: (error: any, errorTitle?: string) => undefined;
-declare const AppWrapper: React.FC<Props$6>;
+declare const AppWrapper: React.FC<Props$7>;
 
 /**
  * Loading spinner/indicator
@@ -65,12 +65,12 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-declare type Props$5 = {
+declare type Props$6 = {
     error: any;
     title?: string;
     onClose?: () => void;
 };
-declare const ErrorBox: React.FC<Props$5>;
+declare const ErrorBox: React.FC<Props$6>;
 
 /**
  * Bootstrap variants
@@ -136,7 +136,7 @@ declare enum ModalType {
  * @author Gabe Abrams
  */
 
-declare type Props$4 = {
+declare type Props$5 = {
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -165,26 +165,26 @@ declare type Props$4 = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props$4>;
+declare const Modal: React.FC<Props$5>;
 
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
  */
 
-declare type Props$3 = {
+declare type Props$4 = {
     title: React.ReactNode;
     children: React.ReactNode;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React.FC<Props$3>;
+declare const TabBox: React.FC<Props$4>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-declare type Props$2 = {
+declare type Props$3 = {
     text: string;
     onSelected: () => void;
     ariaLabel: string;
@@ -196,14 +196,14 @@ declare type Props$2 = {
     unselectedVariant?: Variant;
     small?: boolean;
 };
-declare const RadioButton: React.FC<Props$2>;
+declare const RadioButton: React.FC<Props$3>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-declare type Props$1 = {
+declare type Props$2 = {
     text: string;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -215,19 +215,40 @@ declare type Props$1 = {
     uncheckedVariant?: Variant;
     small?: boolean;
 };
-declare const CheckboxButton: React.FC<Props$1>;
+declare const CheckboxButton: React.FC<Props$2>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-declare type Props = {
+declare type Props$1 = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
 };
-declare const ButtonInputGroup: React.FC<Props>;
+declare const ButtonInputGroup: React.FC<Props$1>;
+
+/**
+ * A very simple, lightweight date chooser
+ * @author Gabe Abrams
+ */
+
+declare type Props = {
+    name: string;
+    month: number;
+    day: number;
+    year: number;
+    /**
+     * Handler for when date changes
+     * @param month new 1-indexed month number
+     * @param day new 1-indexed day number
+     * @param year new full year number
+     */
+    onChange: (month: number, day: number, year: number) => void;
+    numMonthsToShow?: number;
+};
+declare const SimpleDateChooser: React.FC<Props>;
 
 /**
  * An error with a code
@@ -428,6 +449,31 @@ declare const initServer: (opts: {
     getLaunchInfo: GetLaunchInfoFunction;
 }) => void;
 
+/**
+ * Get a number's ordinal
+ * @author Gabe Abrams
+ * @param num the number being analyzed
+ * @returns ordinal
+ */
+declare const getOrdinal: (num: number) => string;
+
+/**
+ * Get current time info in US Boston Eastern Time, independent of machine
+ *   timezone
+ * @author Gabe Abrams
+ * @param {Date} [date=now] the date to get info on
+ * @returns object with timestamp (ms since epoch) and numbers
+ *   corresponding to ET time values for year, month, day, hour, minute
+ */
+declare const getTimeInfoInET: (date?: Date | undefined) => {
+    timestamp: number;
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+};
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -443,4 +489,4 @@ declare enum ReactKitErrorCode {
     NoCACCLGetLaunchInfoFunction = "DRK8"
 }
 
-export { AppWrapper, ButtonInputGroup, CheckboxButton, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType, ModalSize, ModalType, ParamType, RadioButton, ReactKitErrorCode, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, sum, visitServerEndpoint, waitMs };
+export { AppWrapper, ButtonInputGroup, CheckboxButton, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType, ModalSize, ModalType, ParamType, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getOrdinal, getTimeInfoInET, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, sum, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.0.0-beta.39",
+  "version": "3.0.0-beta.41",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/SimpleDateChooser.tsx

@@ -0,0 +1,217 @@
+/**
+ * A very simple, lightweight date chooser
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import helpers
+import getOrdinal from '../helpers/getOrdinal';
+import getTimeInfoInET from '../helpers/getTimeInfoInET';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Name of the chooser (machine-readable, hyphenated)
+  name: string,
+  // Currently selected month
+  month: number,
+  // Currently selected day
+  day: number,
+  // Currently selected year
+  year: number,
+  /**
+   * Handler for when date changes
+   * @param month new 1-indexed month number
+   * @param day new 1-indexed day number
+   * @param year new full year number
+   */
+  onChange: (month: number, day: number, year: number) => void,
+  // Number of months in the future to allow the user to schedule into
+  // (max is 12)
+  numMonthsToShow?: number,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Constants                               */
+/*------------------------------------------------------------------------*/
+
+// Constants
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const SimpleDateChooser: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    name,
+    month,
+    day,
+    year,
+    onChange,
+  } = props;
+  const numMonthsToShow = Math.min(props.numMonthsToShow ?? 6, 12);
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                Main UI                 */
+  /*----------------------------------------*/
+
+  // Determine the set of choices allowed
+  const today = getTimeInfoInET();
+  const choices: {
+    choiceName: string,
+    month: number,
+    days: number[],
+    year: number,
+  }[] = [];
+  for (let i = 0; i < numMonthsToShow; i++) {
+    // Get month and year info
+    const unmoddedMonth = (today.month + i);
+    const month = (
+      unmoddedMonth > 12
+        ? unmoddedMonth - 12
+        : unmoddedMonth
+    );
+    const monthName = MONTH_NAMES[month - 1];
+    const year = (
+      unmoddedMonth > 12
+        ? today.year + 1
+        : today.year
+    );
+
+    // Figure out which days are allowed
+    const days = [];
+    const numDaysInMonth = (new Date(year, month, 0)).getDate();
+    const firstDay = (
+      month === today.month
+        ? today.day // Current month: start at current date
+        : 1 // Future month: start at beginning of month
+    );
+    for (let day = firstDay; day <= numDaysInMonth; day++) {
+      days.push(day);
+    }
+
+    choices.push({
+      choiceName: `${monthName} ${year}`,
+      month,
+      year,
+      days,
+    });
+  }
+
+  // Create choice options
+  const monthOptions: React.ReactNode[] = [];
+  const dayOptions: React.ReactNode[] = [];
+  choices.forEach((choice) => {
+    // Create month option
+    monthOptions.push(
+      <option
+        key={choice.month}
+        value={choice.month}
+        aria-label={`choose ${choice.choiceName}`}
+        onSelect={() => {
+          onChange(choice.month, choice.days[0], choice.year);
+        }}
+      >
+        {choice.choiceName}
+      </option>
+    );
+
+    if (month === choice.month) {
+      // This is the currently selected month
+      // Create day options
+      choice.days.forEach((dayChoice) => {
+        const ordinal = getOrdinal(dayChoice);
+        dayOptions.push(
+          <option
+            key={dayChoice}
+            value={dayChoice}
+            aria-label={`choose date ${dayChoice}`}
+          >
+            {dayChoice}
+            {ordinal}
+          </option>
+        );
+      });
+    }
+  });
+
+  return (
+    <div
+      className="SimpleDateChooser d-inline-block"
+      aria-label={`date chooser with selected date: ${month} ${day}, ${year}`}
+    >
+      {/* Month Chooser */}
+      <select
+        className="custom-select d-inline-block mr-1"
+        style={{ width: 'auto' }}
+        id={`SimpleDateChooser-${name}-month`}
+        value={month}
+        onChange={(e) => {
+          const choice = choices[e.target.selectedIndex];
+
+          // Change day, month, and year
+          onChange(
+            choice.month,
+            choice.days[0],
+            choice.year,
+          );
+        }}
+      >
+        {monthOptions}
+      </select>
+
+      {/* Day Chooser */}
+      <select
+        className="custom-select d-inline-block"
+        style={{ width: 'auto' }}
+        id={`SimpleDateChooser-${name}-day`}
+        value={day}
+        onChange={(e) => {
+          // Only change the day
+          onChange(
+            month,
+            Number.parseInt(e.target.value, 10),
+            year,
+          );
+        }}
+      >
+        {dayOptions}
+      </select>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default SimpleDateChooser;

package/src/helpers/getOrdinal.tsx

@@ -0,0 +1,13 @@
+const ORDINALS = ['th', 'st', 'nd', 'rd'];
+
+/**
+ * Get a number's ordinal
+ * @author Gabe Abrams
+ * @param num the number being analyzed
+ * @returns ordinal
+ */
+const getOrdinal = (num: number): string => {
+  return (ORDINALS[(num - 20) % 10] ?? ORDINALS[num] ?? ORDINALS[0]);
+};
+
+export default getOrdinal;

package/src/helpers/getTimeInfoInET.tsx

@@ -0,0 +1,56 @@
+/**
+ * Get current time info in US Boston Eastern Time, independent of machine
+ *   timezone
+ * @author Gabe Abrams
+ * @param {Date} [date=now] the date to get info on
+ * @returns object with timestamp (ms since epoch) and numbers
+ *   corresponding to ET time values for year, month, day, hour, minute
+ */
+const getTimeInfoInET = (date?: Date): {
+  timestamp: number,
+  year: number,
+  month: number,
+  day: number,
+  hour: number,
+  minute: number,
+} => {
+  // Create a time string
+  const d = (date || new Date());
+  const str = d.toLocaleString(
+    'en-US', // Using US encoding (it's the only one installed on containers)
+    { timeZone: 'America/New_York' } // Force EST timezone
+  );
+
+  // Parse the string for the date/time info
+  const [dateStr, timeStr] = str.split(', '); // Format: MM/DD/YYYY, HH:MM:SS AM
+  const [monthStr, dayStr, yearStr] = dateStr.split('/'); // Format: MM/DD/YYYY
+  const [hourStr, minStr, ending] = timeStr.split(':'); // Format: HH:MM:SS AM
+
+  // Create all time numbers
+  const timestamp = d.getTime();
+  const year = Number.parseInt(yearStr, 10);
+  const month = Number.parseInt(monthStr, 10);
+  const day = Number.parseInt(dayStr, 10);
+  const minute = Number.parseInt(minStr, 10);
+  let hour = Number.parseInt(hourStr, 10);
+  // Convert from am/pm to 24hr
+  const isAM = ending.toLowerCase().includes('am');
+  const isPM = !isAM;
+  if (isPM && hour !== 12) {
+    hour += 12;
+  } else if (isAM && hour === 12) {
+    hour = 0;
+  }
+
+  // Return
+  return {
+    timestamp,
+    year,
+    month,
+    day,
+    hour,
+    minute,
+  };
+};
+
+export default getTimeInfoInET;

package/src/index.ts

@@ -7,6 +7,7 @@ import TabBox from './components/TabBox';
 import RadioButton from './components/RadioButton';
 import CheckboxButton from './components/CheckboxButton';
 import ButtonInputGroup from './components/ButtonInputGroup';
+import SimpleDateChooser from './components/SimpleDateChooser';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -27,6 +28,8 @@ import genRouteHandler from './helpers/genRouteHandler';
 import handleError from './helpers/handleError';
 import handleSuccess from './helpers/handleSuccess';
 import initServer from './server/initServer';
+import getOrdinal from './helpers/getOrdinal';
+import getTimeInfoInET from './helpers/getTimeInfoInET';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -47,6 +50,7 @@ export {
   RadioButton,
   CheckboxButton,
   ButtonInputGroup,
+  SimpleDateChooser,
   // Global functions
   alert,
   confirm,
@@ -64,6 +68,8 @@ export {
   roundToNumDecimals,
   sum,
   waitMs,
+  getOrdinal,
+  getTimeInfoInET,
   // Client helpers
   visitServerEndpoint,
   // Server helpers