refactor: remove ts-key-enum dependency and replace its usage with string literals in keyboard event handling

Author: tyler-dane

bun.lock

@@ -77,7 +77,6 @@
     "prettier": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.0",
     "tailwindcss": "^4.1.14",
-    "ts-key-enum": "^2.0.12",
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1"
   },

packages/web/package.json

@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { BehaviorSubject, distinctUntilChanged } from "rxjs";
-import { Key } from "ts-key-enum";
 import { distinctUntilArrayItemChanged } from "@ngneat/elf";
 import {
   UIEntitiesRef,

packages/web/src/views/Day/components/Agenda/Agenda.tsx

@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import fastDeepEqual from "fast-deep-equal/react";
 import { memo, useCallback } from "react";
-import { Key } from "ts-key-enum";
 import { type UseInteractionsReturn } from "@floating-ui/react";
 import { useObservable } from "@ngneat/use-observable";
 import { ID_GRID_ALLDAY_ROW } from "@web/common/constants/web.constants";
@@ -28,7 +27,7 @@ const AllDayAgendaEventsComponent = ({
 
   const onEnterKey = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
-      if (e.key === Key.Enter) {
+      if (e.key === "Enter") {
         e.preventDefault();
         e.stopPropagation();
         openEventForm();

packages/web/src/views/Day/components/Agenda/Events/AllDayAgendaEvent/AllDayAgendaEvents.tsx

@@ -1,6 +1,5 @@
 import { type FC } from "react";
 import type React from "react";
-import { Key } from "ts-key-enum";
 import { MONTH_DAY_YEAR } from "@core/constants/date.constants";
 import { darken } from "@core/util/color.utils";
 import dayjs from "@core/util/date/dayjs";
@@ -63,12 +62,12 @@ export const DatePickers: FC<Props> = ({
     picker: "start" | "end",
     e: React.KeyboardEvent<HTMLDivElement>,
   ) => {
-    switch (e.key) {
-      case Key.Backspace: {
+    switch (true) {
+      case e.key === "Backspace": {
         e.stopPropagation();
         break;
       }
-      case Key.Enter: {
+      case e.key === "Enter": {
         e.stopPropagation();
         e.preventDefault();
 
@@ -94,7 +93,7 @@ export const DatePickers: FC<Props> = ({
 
         break;
       }
-      case Key.Escape: {
+      case e.key === "Escape": {
         if (isStartDatePickerOpen) {
           e.stopPropagation();
           closeStartDatePicker();
@@ -105,7 +104,7 @@ export const DatePickers: FC<Props> = ({
         }
         break;
       }
-      case Key.Tab: {
+      case e.key === "Tab": {
         if (isStartDatePickerOpen) {
           setIsStartDatePickerOpen(false);
         }

packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/DatePickers/DatePickers.tsx

@@ -1,6 +1,5 @@
 import type React from "react";
 import ReactSelect, { type Props as RSProps } from "react-select";
-import { Key } from "ts-key-enum";
 import { type SelectOption } from "@web/common/types/component.types";
 import { type Option_Time } from "@web/common/types/util.types";
 import { StyledTimePicker } from "./styled";
@@ -43,20 +42,20 @@ export const TimePicker = ({
         onKeyDown={(e) => {
           const key = e.key;
 
-          if (key === Key.Enter || key === Key.Backspace) {
+          if (key === "Enter" || key === "Backspace") {
             e.stopPropagation();
           }
 
-          if (key === Key.Shift) {
+          if (key === "Shift") {
             e.stopPropagation();
           }
 
-          if (key === Key.Escape) {
+          if (key === "Escape") {
             setIsMenuOpen(false);
             e.stopPropagation();
           }
 
-          if (key === Key.Tab) {
+          if (key === "Tab") {
             setIsMenuOpen(false);
           }
         }}

packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/TimePicker/TimePicker.tsx

@@ -2,7 +2,6 @@ import fastDeepEqual from "fast-deep-equal/react";
 import { type KeyboardEvent } from "react";
 import type React from "react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Key } from "ts-key-enum";
 import { Priorities } from "@core/constants/core.constants";
 import { darken } from "@core/util/color.utils";
 import dayjs from "@core/util/date/dayjs";
@@ -83,15 +82,15 @@ export const EventForm: React.FC<Omit<FormProps, "category">> = memo(
 
     const keyDownHandler = useCallback(
       (e: globalThis.KeyboardEvent) => {
-        if (e.key === Key.Shift) {
+        if (e.key === "Shift") {
           setIsShiftKeyPressed(true);
         }
       },
       [_onClose],
     );
 
     const keyUpHandler = useCallback((e: globalThis.KeyboardEvent) => {
-      if (e.key === Key.Shift) {
+      if (e.key === "Shift") {
         setIsShiftKeyPressed(false);
       }
     }, []);
@@ -151,7 +150,7 @@ export const EventForm: React.FC<Omit<FormProps, "category">> = memo(
       // Ignores certain keys and key combinations to prevent default behavior.
       // Allows some of them to be used as hotkeys
 
-      if (e.key === Key.Backspace) {
+      if (e.key === "Backspace") {
         e.stopPropagation();
       }
 
@@ -163,7 +162,7 @@ export const EventForm: React.FC<Omit<FormProps, "category">> = memo(
         e.preventDefault();
       }
 
-      if ((e.metaKey || e.ctrlKey) && e.key === Key.Enter) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
         e.preventDefault();
         onSubmitForm();
       }

packages/web/src/views/Forms/EventForm/EventForm.tsx

@@ -1,7 +1,6 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
 import type React from "react";
 import { useCallback, useRef } from "react";
-import { Key } from "ts-key-enum";
 import { Priorities } from "@core/constants/core.constants";
 import { Categories_Event } from "@core/types/event.types";
 import { darken } from "@core/util/color.utils";
@@ -42,11 +41,11 @@ export const SomedayEventForm: React.FC<FormProps> = ({
   const origRecurrence = useRef(event?.recurrence).current;
 
   const ignoreDelete = (e: KeyboardEvent) => {
-    if (e.key === Key.Backspace) {
+    if (e.key === "Backspace") {
       e.stopPropagation();
     }
 
-    if (e.key !== Key.Enter || e.defaultPrevented) {
+    if (e.key !== "Enter" || e.defaultPrevented) {
       return;
     }
 
@@ -112,12 +111,12 @@ export const SomedayEventForm: React.FC<FormProps> = ({
   }, [onDeleteEvent, onClose]);
 
   const onKeyDown = (e: KeyboardEvent<HTMLFormElement>) => {
-    if (e.key === Key.Backspace) {
+    if (e.key === "Backspace") {
       e.stopPropagation();
       return;
     }
 
-    if (e.defaultPrevented || e.key !== Key.Delete) {
+    if (e.defaultPrevented || e.key !== "Delete") {
       return;
     }
 

packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx

@@ -7,7 +7,6 @@ import ReactSelect, {
 import { components } from "react-select";
 import { Frequency } from "rrule";
 import { useTheme } from "styled-components";
-import { Key } from "ts-key-enum";
 import { brighten, darken } from "@core/util/color.utils";
 import { theme } from "@web/common/styles/theme";
 import { RepeatIcon } from "@web/components/Icons/Repeat";
@@ -68,7 +67,7 @@ export const SomedayRecurrenceSelect = ({
   }, [menuIsOpen]);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === Key.Escape) {
+    if (event.key === "Escape") {
       event.preventDefault();
       event.stopPropagation();
       onCancel?.();