Color picker (#228)

Co-authored-by: Diego Temkin <65834932+dtemkin1@users.noreply.github.com>

Author: jguo22

package-lock.json

@@ -40,8 +40,12 @@ def get_sections() -> Iterable[Tag]:
         Iterable[bs4.element.Tag]: The accordion sections that contain lists of CI-M
             subjects
     """
-    with urlopen(CIM_URL, timeout=5) as cim_req:
-        soup = BeautifulSoup(cim_req.read().decode("utf-8"), "html.parser")
+    try:
+        with urlopen(CIM_URL, timeout=5) as cim_req:
+            soup = BeautifulSoup(cim_req.read().decode("utf-8"), "html.parser")
+    except (URLError, socket.timeout) as error:
+        print(f"error in get_sections: {error}")
+        raise error
 
     return (
         item

scrapers/cim.py

@@ -1,46 +1,32 @@
 import {
-  Group,
-  createListCollection,
+  Button,
+  ButtonGroup,
   Flex,
+  Group,
+  HStack,
   Heading,
   Input,
+  Stack,
   Text,
+  createListCollection,
   parseColor,
-  HStack,
-  Stack,
-  Button,
-  ButtonGroup,
+  ColorPicker,
+  Select,
+  Portal,
 } from "@chakra-ui/react";
 import type { ComponentPropsWithoutRef, FormEvent } from "react";
 import { useContext, useLayoutEffect, useState } from "react";
 
-import { Radio, RadioGroup } from "./ui/radio";
-import {
-  SelectContent,
-  SelectItem,
-  SelectRoot,
-  SelectTrigger,
-  SelectValueText,
-} from "./ui/select";
-import { Field } from "./ui/field";
-import { Checkbox } from "./ui/checkbox";
-import {
-  ColorPickerArea,
-  ColorPickerContent,
-  ColorPickerControl,
-  ColorPickerEyeDropper,
-  ColorPickerChannelSlider,
-  ColorPickerInput,
-  ColorPickerRoot,
-  ColorPickerTrigger,
-} from "./ui/color-picker";
 import { LuCheck as CheckIcon, LuX as CloseIcon } from "react-icons/lu";
+import { Checkbox } from "./ui/checkbox";
+import { Field } from "./ui/field";
+import { Radio, RadioGroup } from "./ui/radio";
 
 import type { Activity, NonClass } from "../lib/activity";
 import { Timeslot } from "../lib/activity";
 import type { Class, SectionLockOption, Sections } from "../lib/class";
 import { LockOption } from "../lib/class";
-import { WEEKDAY_STRINGS, TIMESLOT_STRINGS, Slot } from "../lib/dates";
+import { Slot, TIMESLOT_STRINGS, WEEKDAY_STRINGS } from "../lib/dates";
 import { HydrantContext } from "../lib/hydrant";
 
 /**
@@ -219,24 +205,29 @@ function ActivityColor(props: { activity: Activity; onHide: () => void }) {
   return (
     <Flex gap={2}>
       <Flex direction="row" gap={2}>
-        <ColorPickerRoot
+        <ColorPicker.Root
           value={color}
           onValueChange={(e) => {
             setColor(e.value);
           }}
         >
-          <ColorPickerControl>
-            <ColorPickerInput autoFocus />
-            <ColorPickerTrigger />
-          </ColorPickerControl>
-          <ColorPickerContent>
-            <ColorPickerArea />
-            <HStack>
-              <ColorPickerEyeDropper />
-              <ColorPickerChannelSlider channel="hue" />
-            </HStack>
-          </ColorPickerContent>
-        </ColorPickerRoot>
+          <ColorPicker.HiddenInput />
+          <ColorPicker.Control>
+            <ColorPicker.Input autoFocus />
+            <ColorPicker.Trigger />
+          </ColorPicker.Control>
+          <Portal>
+            <ColorPicker.Positioner>
+              <ColorPicker.Content>
+                <ColorPicker.Area />
+                <HStack>
+                  <ColorPicker.EyeDropper />
+                  <ColorPicker.ChannelSlider channel="hue" />
+                </HStack>
+              </ColorPicker.Content>
+            </ColorPicker.Positioner>
+          </Portal>
+        </ColorPicker.Root>
         <ButtonGroup>
           <Button onClick={onReset}>Reset</Button>
           <Button onClick={onCancel}>Cancel</Button>
@@ -347,7 +338,7 @@ function NonClassAddTime(props: { activity: NonClass }) {
   });
 
   const renderTimeDropdown = (key: "start" | "end") => (
-    <SelectRoot
+    <Select.Root
       collection={timesCollection}
       size="sm"
       width="8rem"
@@ -356,17 +347,28 @@ function NonClassAddTime(props: { activity: NonClass }) {
         setTimes({ ...times, [key]: e.value[0] });
       }}
     >
-      <SelectTrigger>
-        <SelectValueText />
-      </SelectTrigger>
-      <SelectContent>
-        {timesCollection.items.map((time) => (
-          <SelectItem item={time} key={time}>
-            {time}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </SelectRoot>
+      <Select.HiddenSelect />
+      <Select.Control>
+        <Select.Trigger>
+          <Select.ValueText />
+        </Select.Trigger>
+        <Select.IndicatorGroup>
+          <Select.Indicator />
+        </Select.IndicatorGroup>
+      </Select.Control>
+      <Portal>
+        <Select.Positioner>
+          <Select.Content>
+            {timesCollection.items.map((time) => (
+              <Select.Item item={time} key={time}>
+                {time}
+                <Select.ItemIndicator />
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Positioner>
+      </Portal>
+    </Select.Root>
   );
 
   return (

src/components/ActivityButtons.tsx

@@ -23,9 +23,16 @@ import {
   type Module,
 } from "ag-grid-community";
 
-import { Box, Flex, Image, Input, Button, ButtonGroup } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Image,
+  Input,
+  Button,
+  ButtonGroup,
+  InputGroup,
+} from "@chakra-ui/react";
 import { LuPlus, LuMinus, LuSearch, LuStar } from "react-icons/lu";
-import { InputGroup } from "./ui/input-group";
 import { LabelledButton } from "./ui/button";
 import { useColorMode } from "./ui/color-mode";
 

src/components/ClassTable.tsx

@@ -8,10 +8,11 @@ import {
   Float,
   Presence,
   CloseButton,
+  Button,
 } from "@chakra-ui/react";
-import { LinkButton } from "./ui/link-button";
 
 import { HydrantContext } from "../lib/hydrant";
+import { Link } from "react-router";
 
 export const FeedbackBanner = () => {
   const { state } = useContext(HydrantContext);
@@ -40,20 +41,20 @@ export const FeedbackBanner = () => {
             <Text fontWeight="medium" maxW={{ base: "32ch", md: "unset" }}>
               Do you have feedback on Hydrant? We'd love to hear it!
             </Text>
-            <LinkButton
+            <Button
               flexShrink={0}
               variant="plain"
-              href={"mailto:sipb-hydrant@mit.edu"}
               ms="6"
               bg="blackAlpha.300"
               color="whiteAlpha.900"
               fontWeight="semibold"
               px="3"
               py="1"
               height="inherit"
+              asChild
             >
-              Contact us
-            </LinkButton>
+              <Link to={"mailto:sipb-hydrant@mit.edu"}>Contact us</Link>
+            </Button>
             <CloseButton
               hideFrom="sm"
               variant="ghost"