dce-reactkit 3.12.3 → 4.0.0-beta-date-and-time.1

package/genEncodedSecret.ts

@@ -0,0 +1,84 @@
+// Import crypto lib
+import crypto from 'crypto';
+
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+// Get args
+const REACTKIT_CRED_ENCODING_SALT = process.env.npm_config_salt;
+if (!REACTKIT_CRED_ENCODING_SALT) {
+  console.log('Encoding salt is required: --salt=...');
+  process.exit(1);
+}
+
+// Get the key
+let key = process.env.npm_config_key;
+if (!key) {
+  console.log('Key is required: --key=...');
+  process.exit(1);
+}
+
+// Get the description
+let description = process.env.npm_config_description;
+if (!description) {
+  console.log('Description is required: --description=...');
+  process.exit(1);
+}
+
+// Get secret
+let secret = process.env.npm_config_secret;
+if (!secret) {
+  // Generate a random secret
+  secret = '';
+  for (let i = 0; i < 32; i++) {
+    secret += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  console.log('Generated a random secret. If you have one in mind, use --secret=...');
+}
+
+// Get the host name
+const host = process.env.npm_config_host;
+if (!host) {
+  console.log('Host of the receiving server is required: --host=...');
+  process.exit(1);
+}
+
+// Encryption process based on:
+// https://medium.com/@tony.infisical/guide-to-nodes-crypto-module-for-encryption-decryption-65c077176980
+
+// Create a random initialization vector
+const iv = crypto.randomBytes(12).toString('base64');
+
+// Create a cipher
+const cipher = crypto.createCipheriv(
+  'aes-256-gcm',
+  Buffer.from(secret, 'base64'),
+  Buffer.from(iv, 'base64'),
+);
+
+// Encrypt the string
+let ciphertext = cipher.update(secret, 'utf8', 'base64');
+
+// Finalize the encryption
+ciphertext += cipher.final('base64');
+
+// Get the authentication tag
+const tag = cipher.getAuthTag();
+
+// JSONify the encrypted data
+const encryptionPack = encodeURIComponent(JSON.stringify({
+  ciphertext,
+  iv,
+  tag,
+}));
+
+// Show the encrypted data
+console.log('\n\n');
+console.log('––––– Done! What\'s Next: –––––');
+console.log('');
+console.log('On the server *sending* the requests, append the following to the REACTKIT_CROSS_SERVER_CREDENTIALS env var:');
+console.log(`|${host}:${key}:${secret}|`);
+console.log('');
+console.log('On the server *receiving* the requests, add an entry to the "CrossServerCredential" collection:');
+console.log(`{ "description": "${description}", "key": "${key}", "encodedeSecret": "${encryptionPack}", "scopes": [] }`);
+console.log('');
+console.log('For all scopes that the server should have access to, add them to the "scopes" array.');

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "dce-reactkit",
-  "version": "3.12.3",
+  "version": "4.0.0-beta-date-and-time.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
-    "test": "jest --runInBand"
+    "test": "jest --runInBand",
+    "gen-reactkit-cross-server-secret": "npx tsx genEncodedSecret.ts"
   },
   "jest": {
     "preset": "ts-jest",
@@ -24,7 +25,6 @@
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
   "dependencies": {
-    "qs": "^6.x.x",
     "react-select": "^5.7.3"
   },
   "peerDependencies": {
@@ -33,20 +33,19 @@
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
-    "express": "^x.x.x",
-    "react": "^x.x.x",
-    "react-dom": "^x.x.x"
+    "react": "^x.x.x"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rollup/plugin-typescript": "^8.3.2",
+    "@rollup/plugin-typescript": "^10.0.1",
     "@types/bootstrap": "^5.2.8",
     "@types/express": "^4.17.17",
     "@types/jest": "^28.1.7",
     "@types/node": "^20.2.5",
-    "@types/react": "^17.0.7",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "eslint": "^8.42.0",
@@ -58,7 +57,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
-    "raixa": "^1.0.21",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-sourcemaps": "^0.6.3",

package/rollup.config.js

@@ -27,6 +27,7 @@ export default [
       typescript({ tsconfig: "./tsconfig.json" }),
       sourcemaps(),
     ],
+    inlineDynamicImports: true,
     external: [
       ...Object.keys(packageJson.dependencies || {}),
       ...Object.keys(packageJson.peerDependencies || {}),
@@ -36,6 +37,7 @@ export default [
     input: "dist/esm/types/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
     plugins: [dts()],
+    inlineDynamicImports: true,
     external: [
       ...Object.keys(packageJson.dependencies || {}),
       ...Object.keys(packageJson.peerDependencies || {}),

package/src/components/AppWrapper.tsx

@@ -32,10 +32,12 @@ import ErrorWithCode from '../errors/ErrorWithCode';
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
 import logClientEvent from '../helpers/logClientEvent';
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
 import {
   getSessionExpiredMessage,
   isDarkModeOn,
-} from '../client/initClient';
+} from '../helpers/initClient';
 import waitMs from '../helpers/waitMs';
 
 // Import constants

package/src/components/CheckboxButton.tsx

@@ -15,7 +15,7 @@ import { faSquare, faSquareMinus } from '@fortawesome/free-regular-svg-icons';
 import Variant from '../types/Variant';
 
 // Import shared helpers
-import { isDarkModeOn } from '../client/initClient';
+import { isDarkModeOn } from '../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/Dropdown.tsx

@@ -16,7 +16,7 @@ import Variant from '../types/Variant';
 import DropdownItemType from '../types/DropdownItemType';
 
 // Check dark mode
-import { isDarkModeOn } from '../client/initClient';
+import { isDarkModeOn } from '../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/LogReviewer.tsx

@@ -1182,7 +1182,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.startDate.year}
               month={dateFilterState.startDate.month}
               day={dateFilterState.startDate.day}
-              chooseFromPast
+              dontAllowFuture
               numMonthsToShow={36}
               onChange={(month, day, year) => {
                 dateFilterState.startDate = { month, day, year };
@@ -1198,7 +1198,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.endDate.year}
               month={dateFilterState.endDate.month}
               day={dateFilterState.endDate.day}
-              chooseFromPast
+              dontAllowFuture
               numMonthsToShow={12}
               onChange={(month, day, year) => {
                 if (

package/src/components/Modal/index.tsx

@@ -32,7 +32,7 @@ import NUM_MODAL_PORTALS from '../../constants/NUM_MODAL_PORTALS';
 // Import shared helpers
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
-import { isDarkModeOn } from '../../client/initClient';
+import { isDarkModeOn } from '../../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Constants ----------------------------- */

package/src/components/RadioButton.tsx

@@ -13,7 +13,9 @@ import { faCircle } from '@fortawesome/free-regular-svg-icons';
 
 // Import shared types
 import Variant from '../types/Variant';
-import { isDarkModeOn } from '../client/initClient';
+
+// Import shared helpers
+import { isDarkModeOn } from '../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/SimpleDateChooser.tsx

@@ -1,16 +1,23 @@
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
+ * @author Gardeniu Liu
  */
 
 // Import React
 import React from 'react';
-import getMonthName from '../helpers/getMonthName';
 
 // Import helpers
 import getOrdinal from '../helpers/getOrdinal';
+import getMonthName from '../helpers/getMonthName';
 import getTimeInfoInET from '../helpers/getTimeInfoInET';
 
+// Import classes
+import ErrorWithCode from '../errors/ErrorWithCode';
+
+// Import types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -33,12 +40,14 @@ type Props = {
    * @param year new full year number
    */
   onChange: (month: number, day: number, year: number) => void,
-  // Number of months to allow the user to choose from
-  // (max is 12, default is 6)
+  // Number of months in either the past or future to allow the user to choose from
+  // If we aren't allowing the past or the future, we will throw an error
+  // (max is 12, default is 6 in the past and 6 in the future)
   numMonthsToShow?: number,
-  // If true, instead of showing numMonthsToShow months into the future,
-  // show numMonthsToShow months into the past
-  chooseFromPast?: boolean,
+  // If true, the user isn't allowed to select dates in the past
+  dontAllowPast?: boolean,
+  // If true, the user isn't allowed to select dates in the future
+  dontAllowFuture?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -56,8 +65,9 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     ariaLabel,
     name,
     onChange,
-    chooseFromPast,
     numMonthsToShow = 6,
+    dontAllowFuture,
+    dontAllowPast,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -76,16 +86,41 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     days: number[],
     year: number,
   }[] = [];
+
   let startYear = today.year;
   let startMonth = today.month;
-  if (chooseFromPast) {
+
+  // Don't allow past or future dates
+  if (dontAllowPast && dontAllowFuture) {
+    throw new ErrorWithCode(
+      'No past or future dates allowed',
+      ReactKitErrorCode.SimpleDateChooserInvalidDateRange,
+    );
+  }
+
+  // Require numMonthsToShow to be positive
+  if (numMonthsToShow <= 0) {
+    throw new ErrorWithCode(
+      'numMonthsToShow must be positive',
+      ReactKitErrorCode.SimpleDateChooserInvalidNumMonths,
+    );
+  }
+
+  // Recalculate startMonth and startYear when allowing past dates
+  if (!dontAllowPast) {
     startMonth -= Math.max(0, numMonthsToShow - 1);
     while (startMonth <= 0) {
       startMonth += 12;
       startYear -= 1;
     }
   }
-  for (let i = 0; i < numMonthsToShow; i++) {
+  // Calculate total number of months to show
+  let totalMonthsToShow = numMonthsToShow;
+  if (!dontAllowPast && !dontAllowFuture) {
+    totalMonthsToShow = totalMonthsToShow * 2 - 1;
+  }
+
+  for (let i = 0; i < totalMonthsToShow; i++) {
     // Get month and year info
     const unmoddedMonth = (startMonth + i);
     let month = unmoddedMonth;
@@ -105,24 +140,25 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     // Figure out which days are allowed
     const days = [];
     const numDaysInMonth = (new Date(year, month, 0)).getDate();
-    if (chooseFromPast) {
-      // Past selection
-      const numDaysToAdd = (
-        (month === today.month)
-          ? today.day // Current month, only add up to today
-          : numDaysInMonth // Past month, add all days
-      );
-      for (let day = 1; day <= numDaysToAdd; day++) {
-        days.push(day);
+
+    // Current month
+    if (month === today.month && year === today.year) {
+      // Past selection: add all previous days of the month
+      if (!dontAllowPast) {
+        for (let day = 1; day < today.day; day++) {
+          days.push(day);
+        }
       }
-    } else {
+      days.push(today.day); // Add current day
       // Future selection: add all remaining days of the month
-      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++) {
+      if (!dontAllowFuture) {
+        for (let day = today.day + 1; day <= numDaysInMonth; day++) {
+          days.push(day);
+        }
+      }
+    } else { // Past or future month
+      // Include all days in the month
+      for (let day = 1; day <= numDaysInMonth; day++) {
         days.push(day);
       }
     }
@@ -158,8 +194,8 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
       </option>,
     );
 
+    // This is the currently selected month
     if (month === choice.month) {
-      // This is the currently selected month
       // Create day options
       choice.days.forEach((dayChoice) => {
         const ordinal = getOrdinal(dayChoice);

package/src/components/SimpleTimeChooser.tsx

@@ -0,0 +1,195 @@
+/**
+ * A very simple, lightweight time chooser
+ * @author Gardenia Liu
+ */
+
+// Import React
+import React from 'react';
+
+// Import helpers
+import padZerosLeft from '../helpers/padZerosLeft';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Aria label
+  ariaLabel: string,
+  // Name of the chooser (machine-readable, hyphenated)
+  name: string,
+  // Currently selected hour of the day (24hr)
+  hour: number,
+  // Currently selected minute within the hour
+  minute: number,
+  /**
+   * Handler for when time changes
+   * @param hour new 24hr hour number
+   * @param minute new minute number
+   */
+  onChange: (hour: number, minute: number) => void,
+  // Interval in minutes between each choice
+  // Allowed options: 15, 30, 60, defaults to 15
+  // If an unsupported interval is passed in, it will default to 15
+  intervalMin?: number,
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Constants ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Allowed intervals between options
+const ALLOWED_INTERVALS = [15, 30, 60]; // min
+
+// Default interval to use if an unsupported interval is passed in
+const DEFAULT_INTERVAL = ALLOWED_INTERVALS[0]; // min
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const SimpleTimeChooser: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    ariaLabel,
+    name,
+    hour,
+    minute,
+    onChange,
+  } = props;
+  let {
+    intervalMin = DEFAULT_INTERVAL,
+  } = props;
+
+  // Use default interval if not supported
+  if (ALLOWED_INTERVALS.includes(intervalMin)) {
+    intervalMin = DEFAULT_INTERVAL;
+  }
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------- Component Functions ------------------------ */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Convert number of minutes since midnight into 24hour and minute format
+   * @author Gabe Abrams
+   * @param minSinceMidnight total minutes since midnight
+   * @returns hours (24) and minutes
+   */
+  const convertMinSinceMidnightToHoursAndMin = (minSinceMidnight: number): {
+    hours: number,
+    minutes: number,
+  } => {
+    return {
+      hours: Math.floor(minSinceMidnight / 60),
+      minutes: minSinceMidnight % 60,
+    };
+  };
+
+  /**
+   * Convert time in minutes into HH:MM format
+   * @author Gardenia Liu
+   * @param totalMinutes total minutes since midnight
+   * @returns formatted time string
+   */
+  const formatTime = (totalMinutes: number): string => {
+    // Handle special cases
+    if (totalMinutes === 0) {
+      return '12:00 Midnight';
+    }
+    if (totalMinutes === 12 * 60) {
+      return '12:00 Noon';
+    }
+
+    // All normal cases:
+    const timeInfo = convertMinSinceMidnightToHoursAndMin(totalMinutes);
+    let { hours } = timeInfo;
+    const { minutes } = timeInfo;
+
+    // Process 24hr -> 12hr
+    const isAM = (hours < 12);
+    if (hours === 0) {
+      hours = 12;
+    } else if (hours > 12) {
+      hours %= 12;
+    }
+
+    // Pad with zeros
+    const paddedMinutes = padZerosLeft(minutes, 2);
+
+    // Assemble time string
+    return `${hours}:${paddedMinutes} ${isAM ? 'AM' : 'PM'}`;
+  };
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  // Generate list of time options
+  const times: string[] = [];
+  for (let time = 0; time < 24 * 60; time += intervalMin) {
+    times.push(formatTime(time));
+  }
+
+  // Create choice options
+  const selectedTimeMin = hour * 60 + minute; // minutes since midnight
+  const timeOptions: React.ReactNode[] = times.map((timeString, timeIndex) => {
+    // Create time option
+    const numMinutesForChoice = timeIndex * intervalMin;
+
+    // Render the option
+    return (
+      <option
+        key={numMinutesForChoice}
+        value={numMinutesForChoice}
+        aria-label={`choose ${timeString}`}
+      >
+        {timeString}
+      </option>
+    );
+  });
+
+  return (
+    <div
+      className="SimpleTimeChooser-container"
+      aria-label={`time chooser with selected time: ${formatTime(selectedTimeMin)}`}
+    >
+      {/* Time Chooser */}
+      <select
+        aria-label={`time for ${ariaLabel}`}
+        className="custom-select d-inline-block"
+        style={{ width: 'auto' }}
+        id={`SimpleTimeChooser-${name}-time`}
+        value={selectedTimeMin}
+        onChange={(e) => {
+          // Parse selector value (string)
+          const newTime = Number.parseInt(e.target.value, 10);
+
+          // Convert minutes since midnight to hour and minute
+          const timeInfo = convertMinSinceMidnightToHoursAndMin(newTime);
+
+          // Notify parent of change
+          onChange(timeInfo.hours, timeInfo.minutes);
+        }}
+      >
+        {timeOptions}
+      </select>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------- Wrap Up ------------------------------ */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default SimpleTimeChooser;

package/src/components/Tooltip.tsx

@@ -15,7 +15,7 @@ type Props = {
   // Text of the tooltip
   text: string,
   // Children to wrap in the tooltip
-  children: JSX.Element,
+  children: any,
 };
 
 /*------------------------------------------------------------------------*/

package/src/{client → helpers}/initClient.tsx

@@ -3,9 +3,11 @@
 // eslint-disable-next-line import/no-cycle
 import { showFatalError } from '../components/AppWrapper';
 
+// Import other helpers
+import waitMs from './waitMs';
+
 // Import shared types
 import ErrorWithCode from '../errors/ErrorWithCode';
-import waitMs from '../helpers/waitMs';
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 
 /*----------------------------------------*/
@@ -164,10 +166,12 @@ const initClient = (
     storedSendRequest = async () => {
       throw new Error('Cannot send requests because there is no server');
     };
+    noServer = true;
   } else {
     // Store values
     storedSendRequest = opts.sendRequest;
     sessionExpiredMessage = opts.sessionExpiredMessage;
+    noServer = false;
   }
 
   // Handle universal parts

package/src/helpers/logClientEvent.tsx

@@ -5,10 +5,12 @@ import LogFunction from '../types/LogFunction';
 import LogLevel from '../types/LogLevel';
 
 // Import shared functions
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
 import visitServerEndpoint from './visitServerEndpoint';
 
 // Import status
-import { appHasNoServer } from '../client/initClient';
+import { appHasNoServer } from './initClient';
 
 /* ------- Metadata Populator ------- */
 

package/src/helpers/visitServerEndpoint.tsx

@@ -7,7 +7,7 @@ import ReactKitErrorCode from '../types/ReactKitErrorCode';
 // Import helpers
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
-import { getSendRequest } from '../client/initClient';
+import { getSendRequest } from './initClient';
 import { showSessionExpiredMessage } from '../components/AppWrapper';
 
 /*------------------------------------------------------------------------*/