feat(web): restrict someday event recurrence to weekly/monthly only (#1017)

* Initial plan

* feat(web): add SomedayRecurrenceSection with restricted frequency options

Co-authored-by: tyler-dane <30163055+tyler-dane@users.noreply.github.com>

* refactor(web): replace ConditionalRender with conditional rendering in RecurrenceSection components

* refactor(web): remove unused ConditionalRender component

* refactor(web): remove end date controls from SomedayRecurrenceSection

* refactor(web): modularize recurrence code

* test(web): add category prop to EventForm tests for better event categorization

* refactor(web): modularize RecurrenceSection children

* refactor(web): enhance SomedayRecurrenceSection with improved select handling and styling

* refactor(web): update SomedayRecurrenceSection to use role-based queries for better accessibility

* refactor(web): implement cancel edit functionality in SomedayRecurrenceSection

* refactor(web): improve event handling in SomedayEventForm and add combobox interaction checks

* style(web): update font size and text case in SomedayRecurrenceSection components

* style(web): adjust overflow handling in SomedayRecurrenceSelect component

* Update packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/useRecurrence/useRecurrence.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: tyler-dane <30163055+tyler-dane@users.noreply.github.com>
Co-authored-by: Tyler Dane <tyler@switchback.tech>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

packages/web/src/components/ConditionalRender/conditional-render.tsx

@@ -3,7 +3,7 @@ import { Categories_Event } from "@core/types/event.types";
 import {
   DateTimeSection,
   Props as DateTimeSectionProps,
-} from "./DateTimeSection/DateTimeSection";
+} from "../DateTimeSection/DateTimeSection";
 import { StyledControlsSection } from "./styled";
 
 interface Props {

…/EventForm/DateControlsSection/index.tsx …eControlsSection/DateControlsSection.tsxpackages/web/src/views/Forms/EventForm/DateControlsSection/index.tsx renamed to packages/web/src/views/Forms/EventForm/DateControlsSection/DateControlsSection/DateControlsSection.tsx packages/web/src/views/Forms/EventForm/DateControlsSection/index.tsx renamed to packages/web/src/views/Forms/EventForm/DateControlsSection/DateControlsSection/DateControlsSection.tsx

@@ -8,7 +8,6 @@ import { brighten, darken } from "@core/util/color.utils";
 import { parseCompassEventDate } from "@core/util/event/event.util";
 import { theme } from "@web/common/styles/theme";
 import { hoverColorByPriority } from "@web/common/styles/theme.util";
-import { ConditionalRender } from "@web/components/ConditionalRender/conditional-render";
 import { DatePicker } from "@web/components/DatePicker/DatePicker";
 import { Flex } from "@web/components/Flex";
 import { RepeatIcon } from "@web/components/Icons/Repeat";
@@ -24,13 +23,13 @@ import {
   StyledRepeatTextContainer,
   StyledWeekDay,
 } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/styled";
+import { useRecurrence } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/useRecurrence/useRecurrence";
 import {
   FREQUENCY_MAP,
   FREQUENCY_OPTIONS,
   FrequencyValues,
   WEEKDAYS,
-  useRecurrence,
-} from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/utils";
+} from "./constants/recurrence.constants";
 
 export interface RecurrenceSectionProps {
   bgColor: string;
@@ -66,22 +65,20 @@ const RecurrenceToggle = ({
 }) => {
   return (
     <StyledRepeatRow>
-      <ConditionalRender condition={!hasRecurrence}>
+      {!hasRecurrence ? (
         <StyledRepeatContainer onClick={toggleRecurrence}>
           <StyledRepeatText hasRepeat={hasRecurrence} tabIndex={0}>
             Does not repeat
           </StyledRepeatText>
         </StyledRepeatContainer>
-      </ConditionalRender>
-
-      <ConditionalRender condition={hasRecurrence}>
+      ) : (
         <StyledRepeatTextContainer onClick={toggleRecurrence}>
           <RepeatIcon />
           <StyledRepeatText hasRepeat={hasRecurrence}>
             Repeats every
           </StyledRepeatText>
         </StyledRepeatTextContainer>
-      </ConditionalRender>
+      )}
     </StyledRepeatRow>
   );
 };
@@ -382,43 +379,45 @@ export const RecurrenceSection = ({
         marginBottom: 10,
       }}
     >
-      <ConditionalRender condition={hasRecurrence}>
+      {hasRecurrence && (
         <EditRecurrence
           open={showForm}
           onClick={() => setShowForm((value) => !value)}
         />
-      </ConditionalRender>
+      )}
 
-      <ConditionalRender condition={hasRecurrence ? showForm : true}>
+      {(!hasRecurrence || showForm) && (
         <RecurrenceToggle
           hasRecurrence={hasRecurrence}
           toggleRecurrence={toggleRecurrence}
         />
-      </ConditionalRender>
+      )}
 
-      <ConditionalRender condition={hasRecurrence && showForm}>
-        <RecurrenceIntervalSelect
-          bgColor={bgColor}
-          initialValue={interval}
-          frequency={freq}
-          onChange={setInterval}
-          onFreqSelect={setFreq}
-          min={1}
-          max={12}
-        />
+      {hasRecurrence && showForm && (
+        <>
+          <RecurrenceIntervalSelect
+            bgColor={bgColor}
+            initialValue={interval}
+            frequency={freq}
+            onChange={setInterval}
+            onFreqSelect={setFreq}
+            min={1}
+            max={12}
+          />
 
-        <WeekDays bgColor={bgColor} value={weekDays} onChange={setWeekDays} />
+          <WeekDays bgColor={bgColor} value={weekDays} onChange={setWeekDays} />
 
-        <EndsOnDate
-          bgColor={bgColor}
-          inputColor={
-            hoverColorByPriority[event.priority ?? Priorities.UNASSIGNED]
-          }
-          until={until}
-          minDate={event.endDate}
-          setUntil={setUntil}
-        />
-      </ConditionalRender>
+          <EndsOnDate
+            bgColor={bgColor}
+            inputColor={
+              hoverColorByPriority[event.priority ?? Priorities.UNASSIGNED]
+            }
+            until={until}
+            minDate={event.endDate}
+            setUntil={setUntil}
+          />
+        </>
+      )}
     </StyledRepeatRow>
   );
 };