spear-ai · psirenny · Apr 27, 2024 · Apr 27, 2024
diff --git a/.changeset/grumpy-peas-shave.md b/.changeset/grumpy-peas-shave.md
@@ -0,0 +1,5 @@
+---
+"@spear-ai/ui": minor
+---
+
+Added sections/headers to Select and ComboBox components.
diff --git a/.changeset/stale-monkeys-wonder.md b/.changeset/stale-monkeys-wonder.md
@@ -0,0 +1,5 @@
+---
+"@spear-ai/ui": minor
+---
+
+Added stories around selecting countries, currencies, and languages.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -9,14 +9,12 @@
   },
   "type": "module",
   "dependencies": {
-    "@leeoniya/ufuzzy": "1.0.14",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-slot": "1.0.2",
     "@react-hookz/web": "24.0.4",
     "@sentry/nextjs": "7.112.0",
     "@spear-ai/logo": "2.1.1",
     "classix": "2.1.37",
-    "graphql-relay": "0.10.1",
     "next": "14.2.2",
     "next-themes": "0.3.0",
     "react": "18.2.0",

diff --git a/packages/ui/src/components/combo-box/combo-box.stories.tsx b/packages/ui/src/components/combo-box/combo-box.stories.tsx
@@ -1,13 +1,14 @@
 import { useControlledState } from "@react-stately/utils";
 import type { Meta, StoryObj } from "@storybook/react";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { Form } from "react-aria-components";
 import { useIntl } from "react-intl";
 import {
   ComboBox,
   ComboBoxButton,
   ComboBoxDescription,
   ComboBoxFieldError,
+  ComboBoxHeader,
   ComboBoxIcon,
   ComboBoxInput,
   ComboBoxLabel,
@@ -17,15 +18,19 @@ import {
   ComboBoxListBoxItemCheckIcon,
   ComboBoxListBoxItemLabel,
   ComboBoxPopover,
+  ComboBoxSection,
   ComboBoxTrigger,
 } from "@/components/combo-box/combo-box";
-import { querySensorConnection } from "@/data/sensor";
-
-type SensorEdge = Awaited<ReturnType<typeof querySensorConnection>>["edges"][0];
+import { specialSensorList1, specialSensorList2, standardSensorList } from "@/data/sensor";
 
 const PreviewComboBox = (properties: {
+  hasDefaultItem: boolean;
   hasLabel: boolean;
   hasLabelDescription: boolean;
+  hasSection1: boolean;
+  hasSection1Header: boolean;
+  hasSection2: boolean;
+  hasSection2Header: boolean;
   isAlwaysOpen: boolean;
   isDisabled: boolean;
   isInvalid: boolean;
@@ -34,8 +39,13 @@ const PreviewComboBox = (properties: {
   menuTrigger: "focus" | "input";
 }) => {
   const {
+    hasDefaultItem,
     hasLabel,
     hasLabelDescription,
+    hasSection1,
+    hasSection1Header,
+    hasSection2,
+    hasSection2Header,
     isAlwaysOpen,
     isDisabled,
     isInvalid,
@@ -46,10 +56,6 @@ const PreviewComboBox = (properties: {
   const intl = useIntl();
   const [selectedKey, setSelectedKey] = useControlledState<string | null>(undefined, null);
   const [isOpen, setIsOpen] = useControlledState<boolean>(undefined, false);
-  const itemList = useMemo(() => {
-    const result = querySensorConnection({ first: 200 });
-    return isOptional ? [{ cursor: "", highlightedText: null, node: null }, ...result.edges] : result.edges;
-  }, [isOptional]);
 
   const handleSelectionChange = useCallback(
     (key: number | string) => {
@@ -68,7 +74,6 @@ const PreviewComboBox = (properties: {
       <Form className="relative w-full">
         <ComboBox
           className="w-full"
-          defaultItems={itemList}
           isDisabled={isDisabled}
           isInvalid={isInvalid}
           menuTrigger={menuTrigger}
@@ -77,12 +82,7 @@ const PreviewComboBox = (properties: {
           selectedKey={selectedKey}
         >
           {hasLabel ? (
-            <ComboBoxLabel>
-              {intl.formatMessage({
-                defaultMessage: "Sensor",
-                id: "SCewMo",
-              })}
-            </ComboBoxLabel>
+            <ComboBoxLabel>{intl.formatMessage({ defaultMessage: "Sensor", id: "SCewMo" })}</ComboBoxLabel>
           ) : null}
           {hasLabel && hasLabelDescription ? (
             <ComboBoxDescription>
@@ -113,27 +113,72 @@ const PreviewComboBox = (properties: {
           ) : null}
           <ComboBoxPopover isOpen={isAlwaysOpen ? true : isOpen}>
             <ComboBoxListBox>
-              {(edge: SensorEdge) => {
-                if (edge.cursor === "") {
-                  return (
-                    <ComboBoxListBoxItem id="" isNone>
+              {hasSection1 ? (
+                <ComboBoxSection>
+                  {hasSection1Header ? (
+                    <ComboBoxHeader>
                       {intl.formatMessage({
-                        defaultMessage: "None",
-                        id: "450Fty",
+                        defaultMessage: "Section 1",
+                        id: "GUDhpC",
                       })}
+                    </ComboBoxHeader>
+                  ) : null}
+                  {specialSensorList1.map((sensor) => (
+                    <ComboBoxListBoxItem id={sensor.id} key={sensor.id} textValue={sensor.name}>
+                      <ComboBoxListBoxItemLabel>{sensor.name}</ComboBoxListBoxItemLabel>
+                      <ComboBoxListBoxItemCheck>
+                        <ComboBoxListBoxItemCheckIcon />
+                      </ComboBoxListBoxItemCheck>
                     </ComboBoxListBoxItem>
-                  );
-                }
-
-                return edge.node == null ? null : (
-                  <ComboBoxListBoxItem id={edge.node.id} key={edge.node.id} textValue={edge.node.name}>
-                    <ComboBoxListBoxItemLabel>{edge.node.name}</ComboBoxListBoxItemLabel>
+                  ))}
+                </ComboBoxSection>
+              ) : null}
+              {hasSection2 ? (
+                <ComboBoxSection>
+                  {hasSection2Header ? (
+                    <ComboBoxHeader>
+                      {intl.formatMessage({
+                        defaultMessage: "Section 2",
+                        id: "H+Wcch",
+                      })}
+                    </ComboBoxHeader>
+                  ) : null}
+                  {specialSensorList2.map((sensor) => (
+                    <ComboBoxListBoxItem id={sensor.id} key={sensor.id} textValue={sensor.name}>
+                      <ComboBoxListBoxItemLabel>{sensor.name}</ComboBoxListBoxItemLabel>
+                      <ComboBoxListBoxItemCheck>
+                        <ComboBoxListBoxItemCheckIcon />
+                      </ComboBoxListBoxItemCheck>
+                    </ComboBoxListBoxItem>
+                  ))}
+                </ComboBoxSection>
+              ) : null}
+              <ComboBoxSection>
+                {isOptional ? (
+                  <ComboBoxListBoxItem id="" isNone>
+                    {intl.formatMessage({
+                      defaultMessage: "None",
+                      id: "450Fty",
+                    })}
+                  </ComboBoxListBoxItem>
+                ) : null}
+                {hasDefaultItem ? (
+                  <ComboBoxListBoxItem id="Default">
+                    {intl.formatMessage({
+                      defaultMessage: "Default",
+                      id: "lKv8ex",
+                    })}
+                  </ComboBoxListBoxItem>
+                ) : null}
+                {standardSensorList.map((item) => (
+                  <ComboBoxListBoxItem id={item.id} key={item.id} textValue={item.name}>
+                    <ComboBoxListBoxItemLabel>{item.name}</ComboBoxListBoxItemLabel>
                     <ComboBoxListBoxItemCheck>
                       <ComboBoxListBoxItemCheckIcon />
                     </ComboBoxListBoxItemCheck>
                   </ComboBoxListBoxItem>
-                );
-              }}
+                ))}
+              </ComboBoxSection>
             </ComboBoxListBox>
           </ComboBoxPopover>
         </ComboBox>
@@ -153,8 +198,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Standard: Story = {
   args: {
+    hasDefaultItem: true,
     hasLabel: true,
     hasLabelDescription: true,
+    hasSection1: true,
+    hasSection1Header: true,
+    hasSection2: true,
+    hasSection2Header: true,
     isAlwaysOpen: false,
     isDisabled: false,
     isInvalid: false,

diff --git a/packages/ui/src/components/combo-box/combo-box.tsx b/packages/ui/src/components/combo-box/combo-box.tsx
@@ -13,11 +13,13 @@ import {
   Button as ButtonPrimitive,
   ComboBox as ComboBoxPrimitive,
   FieldError as FieldErrorPrimitive,
+  Header as HeaderPrimitive,
   Input as InputPrimitive,
   Label as LabelPrimitive,
   ListBox as ListBoxPrimitive,
   ListBoxItem as ListBoxItemPrimitive,
   Popover as PopoverPrimitive,
+  Section as SectionPrimitive,
 } from "react-aria-components";
 import { cx } from "@/helpers/cx";
 
@@ -147,6 +149,29 @@ export const ComboBoxPopover = forwardRef<
 
 ComboBoxPopover.displayName = "ComboBoxPopover";
 
+export const ComboBoxSection = forwardRef<
+  ElementRef<typeof SectionPrimitive>,
+  ComponentPropsWithoutRef<typeof SectionPrimitive> & { className?: string | undefined }
+>(({ className, ...properties }, reference) => {
+  const mergedClassName = cx(
+    "relative mt-1 pt-1 before:absolute before:inset-x-2 before:top-0 before:h-px before:bg-neutral-6 before:content-[''] first:mt-0 first:pt-0 first:before:content-none theme-forerunner:dark:before:bg-white-a-6",
+    className,
+  );
+  return <SectionPrimitive className={mergedClassName} {...properties} ref={reference} />;
+});
+
+ComboBoxSection.displayName = "ComboBoxSection";
+
+export const ComboBoxHeader = forwardRef<
+  ElementRef<typeof HeaderPrimitive>,
+  ComponentPropsWithoutRef<typeof HeaderPrimitive> & { className?: string | undefined }
+>(({ className, ...properties }, reference) => {
+  const mergedClassName = cx("px-2 pt-2 text-sm/5 font-medium text-neutral-11 sm:text-xs/5", className);
+  return <HeaderPrimitive className={mergedClassName} {...properties} ref={reference} />;
+});
+
+ComboBoxHeader.displayName = "ComboBoxHeader";
+
 // The ListBox component supports a generic type, but we don’t use it
 // because passing it through `forwardRef(…)` is challenging.
 export const ComboBoxListBox = forwardRef<

diff --git a/packages/ui/src/components/combo-box/country-combo-box.stories.tsx b/packages/ui/src/components/combo-box/country-combo-box.stories.tsx
@@ -0,0 +1,89 @@
+import { useControlledState } from "@react-stately/utils";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Form } from "react-aria-components";
+import { useIntl } from "react-intl";
+import {
+  ComboBox,
+  ComboBoxButton,
+  ComboBoxIcon,
+  ComboBoxInput,
+  ComboBoxLabel,
+  ComboBoxListBox,
+  ComboBoxListBoxItem,
+  ComboBoxListBoxItemCheck,
+  ComboBoxListBoxItemCheckIcon,
+  ComboBoxListBoxItemLabel,
+  ComboBoxPopover,
+  ComboBoxTrigger,
+} from "@/components/combo-box/combo-box";
+import { useRegionList } from "@/hooks/use-region-list";
+
+const PreviewComboBox = () => {
+  const intl = useIntl();
+  const [value, setValue] = useControlledState<string | null>(undefined, null);
+  const regionList = useRegionList(["US", "GB"]);
+
+  return (
+    <div className="w-full max-w-xs">
+      <Form className="relative w-full">
+        <ComboBox
+          menuTrigger="focus"
+          onSelectionChange={(key: number | string) => {
+            setValue(key === "" ? null : `${key}`);
+          }}
+          selectedKey={value}
+        >
+          <ComboBoxLabel>
+            {intl.formatMessage({
+              defaultMessage: "Country",
+              id: "vONi+O",
+            })}
+          </ComboBoxLabel>
+          <ComboBoxTrigger>
+            <ComboBoxInput
+              placeholder={intl.formatMessage({
+                defaultMessage: "Select a country",
+                id: "EEdOfh",
+              })}
+            />
+            <ComboBoxButton>
+              <ComboBoxIcon />
+            </ComboBoxButton>
+          </ComboBoxTrigger>
+          <ComboBoxPopover>
+            <ComboBoxListBox>
+              <ComboBoxListBoxItem id="" isNone>
+                {intl.formatMessage({
+                  defaultMessage: "None",
+                  id: "450Fty",
+                })}
+              </ComboBoxListBoxItem>
+              {regionList.map((item) => (
+                <ComboBoxListBoxItem id={item.id} key={item.id} textValue={item.name}>
+                  <ComboBoxListBoxItemLabel>{item.name}</ComboBoxListBoxItemLabel>
+                  <ComboBoxListBoxItemCheck>
+                    <ComboBoxListBoxItemCheckIcon />
+                  </ComboBoxListBoxItemCheck>
+                </ComboBoxListBoxItem>
+              ))}
+            </ComboBoxListBox>
+          </ComboBoxPopover>
+        </ComboBox>
+      </Form>
+    </div>
+  );
+};
+
+const meta = {
+  component: PreviewComboBox,
+} satisfies Meta<typeof PreviewComboBox>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Standard: Story = {
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;